Off Canvas Overlay Full Screen

Developer
GRAY GHOST
Size
5,270 Kb
Views
54,648
  1. Off Canvas Overlay Full Screen Previews
  2. Off Canvas Overlay Full Screen HTML Codes
  3. Off Canvas Overlay Full Screen CSS Codes
  4. Off Canvas Overlay Full Screen JS Codes

How do I make an off canvas overlay full screen?

Donation for This is Responsive. Off Canvas Pattern Section. Full Screen Overlay. http://bradfrost.github.io/this-is-responsive. What is a off canvas overlay full screen? How do you make a off canvas overlay full screen? This script and codes were developed by GRAY GHOST on 23 June 2022, Thursday.

Off Canvas Overlay Full Screen Previews
IQ Test

Off Canvas Overlay Full Screen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Off Canvas Overlay Full Screen</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* ******************************************************* * Off Canvas Notes * You will need to provide your own fallbacks for any * device/browser the does not support transitions and * transforms. I would suggest using the right or left * property as a fallback to the transforms used. ******************************************************* */
/* ******************************************************* * GLobals ******************************************************* */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
a { color: gray;
}
/* ******************************************************* * Container ******************************************************* */
[role="banner"],
[role="main"] { padding: 0 5%;
}
.container { width: 100%; background: #EFEFEF; padding: .5rem 5%; /* 8/16 = .5rem */
}
/* ******************************************************* * Logo ******************************************************* */
.logo { font-size: 1.375rem; /* 22/16 = .5rem */
}
/* ******************************************************* * Menu Triggers ******************************************************* */
/* Hide Triggers When JS is Disabled */
.menu-close,
#menu-trigger{ display: none;
}
.js .menu-close { display: inline-block; background: #070606; color: #F3E8E8; padding: .625rem; /* 10/16 = .625rem */ width: 100%; text-align: center;
}
/* ******************************************************* * Media Query Small Screens ******************************************************* */
@media screen and (max-width: 40em) { /* 640/16 = 40em */ .header { padding: 0 5%; } .js .logo { background: #383636; position: fixed; width: 100%; left: 0; top: 0; margin: 0; padding: 1.25rem 5%; /* 8/16 = .5em */ } .js #menu-trigger { display: inline-block; position: absolute; top: 1.375rem; /* 22/16 = .5rem */ right: 5%; color: white; } #menu-trigger:hover { cursor: pointer; } .js .navigation { display: block; position: fixed; top: 0; right: 0; bottom: 0; /* Off Canvas Menu Slide in Speed */ -webkit-transition: 0.3s -webkit-transform cubic-bezier(0,0,.58,1); -moz-transition: 0.3s -moz-transform cubic-bezier(0,0,.58,1); -o-transition: 0.3s -o-transform cubic-bezier(0,0,.58,1); transition: 0.3s transform cubic-bezier(0,0,.58,1); width: 100%; overflow-y: auto; z-index: 10000; background: rgba(255, 255, 255, 0.98); } /* Hide : Off Canvas Menu */ .js .off-canvas--hide { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* Show : Off Canvas Menu Class */ .js .off-canvas--show { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .navigation__link { display: block; text-align: center; padding-left: 1.25rem; /* 20/16 = 1.25rem */ padding: 0.625rem 1.25rem; /* 10/16 = 0.625rem */ /* 20/16 = 1.25rem */ } .js .header--fixed { position: fixed; top: 0; left: 0; /* Layer Promotion for Hardware Acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); width: 100%; z-index: 9000; /* because we dont know what is on the page and layered so setting this high pushes our menu to the front of the stack when it slides over our content. */ height: 100%; } .js [role="main"] { padding-top: 5rem; /* 80/16 = 5rem */ }
}
@media screen and (max-width: 40.00625em) { /* 640.1/16 = 40.00625em */ .menu-close:hover { cursor: pointer; }
}
/* ******************************************************* * Media Query Large Screens ******************************************************* */
@media screen and (min-width: 40.00625em) { /* 640.1/16 = 40.00625em */ .js .menu-close { display: none; } .js #menu-trigger { display: none; } .navigation { display: inline-block; width: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- #Start Pattern -->
<header class="header header--fixed" role="banner"> <!-- Logo --> <h1 class="logo"><a href="#logo">Logo</a></h1> <!-- Menu Trigger --> <a href="#menu" id="menu-trigger"><span aria-hidden="true">Menu</span></a> <!-- Nav --> <nav id="menu" class="navigation off-canvas--hide" aria-hidden="false" role="navigation"> <span class="menu-close" aria-hidden="true">X</span> <a href="http://bradfrost.github.com/this-is-responsive" class="navigation__link">Features</a> <a href="http://bradfrost.github.com/this-is-responsive/patterns.html" class="navigation__link">Pricing</a> <a href="http://bradfrost.github.com/this-is-responsive/patterns.html" class="navigation__link">About</a> <a href="http://bradfrost.github.com/this-is-responsive/patterns.html" class="navigation__link">Blog</a> <a href="http://bradfrost.github.com/this-is-responsive/patterns.html" class="navigation__link">Contact</a> <a href="http://bradfrost.github.com/this-is-responsive/patterns.html" class="navigation__link">Sign In</a> <a href="http://bradfrost.github.com/this-is-responsive/patterns.html" class="navigation__link">Sign Up</a> </nav>
</header>
<!-- #End Pattern -->
<main role="main"> <header> <h1>The Rest of the Story</h1> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</main>	<div class="container">	<section class="pattern-description">	<h1>Off Canvas Full Screen Overlay</h1> <p>An off-canvas layout that tucks a top level navigation outside the viewport for small screens but exposes it once enough screen space becomes available.</p>	<h2>Resources</h2>	<ul>	<li><a href="http://www.lukew.com/ff/entry.asp?1517">Off Canvas Multi-Device Layout Entry 1517</a></li>	<li><a href="http://www.lukew.com/ff/entry.asp?1569">Off Canvas Multi-Device Layouts Entry 1519</a></li>	<li><a href="http://jasonweaver.name/lab/offcanvas/">Off-Canvas demo by Jason Weaver</a></li>	<li><a href="http://www.zurb.com/playground/off-canvas-layouts">Off Canvas Layouts in Zurb Foundation</a></li>	</ul>	</section>	<footer role="contentinfo">	<div>	<nav id="menu">	<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>	</nav>	</div>	</footer>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Off Canvas Overlay Full Screen - Script Codes CSS Codes

/* ******************************************************* * Off Canvas Notes * You will need to provide your own fallbacks for any * device/browser the does not support transitions and * transforms. I would suggest using the right or left * property as a fallback to the transforms used. ******************************************************* */
/* ******************************************************* * GLobals ******************************************************* */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
a { color: gray;
}
/* ******************************************************* * Container ******************************************************* */
[role="banner"],
[role="main"] { padding: 0 5%;
}
.container { width: 100%; background: #EFEFEF; padding: .5rem 5%; /* 8/16 = .5rem */
}
/* ******************************************************* * Logo ******************************************************* */
.logo { font-size: 1.375rem; /* 22/16 = .5rem */
}
/* ******************************************************* * Menu Triggers ******************************************************* */
/* Hide Triggers When JS is Disabled */
.menu-close,
#menu-trigger{ display: none;
}
.js .menu-close { display: inline-block; background: #070606; color: #F3E8E8; padding: .625rem; /* 10/16 = .625rem */ width: 100%; text-align: center;
}
/* ******************************************************* * Media Query Small Screens ******************************************************* */
@media screen and (max-width: 40em) { /* 640/16 = 40em */ .header { padding: 0 5%; } .js .logo { background: #383636; position: fixed; width: 100%; left: 0; top: 0; margin: 0; padding: 1.25rem 5%; /* 8/16 = .5em */ } .js #menu-trigger { display: inline-block; position: absolute; top: 1.375rem; /* 22/16 = .5rem */ right: 5%; color: white; } #menu-trigger:hover { cursor: pointer; } .js .navigation { display: block; position: fixed; top: 0; right: 0; bottom: 0; /* Off Canvas Menu Slide in Speed */ -webkit-transition: 0.3s -webkit-transform cubic-bezier(0,0,.58,1); -moz-transition: 0.3s -moz-transform cubic-bezier(0,0,.58,1); -o-transition: 0.3s -o-transform cubic-bezier(0,0,.58,1); transition: 0.3s transform cubic-bezier(0,0,.58,1); width: 100%; overflow-y: auto; z-index: 10000; background: rgba(255, 255, 255, 0.98); } /* Hide : Off Canvas Menu */ .js .off-canvas--hide { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* Show : Off Canvas Menu Class */ .js .off-canvas--show { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .navigation__link { display: block; text-align: center; padding-left: 1.25rem; /* 20/16 = 1.25rem */ padding: 0.625rem 1.25rem; /* 10/16 = 0.625rem */ /* 20/16 = 1.25rem */ } .js .header--fixed { position: fixed; top: 0; left: 0; /* Layer Promotion for Hardware Acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); width: 100%; z-index: 9000; /* because we dont know what is on the page and layered so setting this high pushes our menu to the front of the stack when it slides over our content. */ height: 100%; } .js [role="main"] { padding-top: 5rem; /* 80/16 = 5rem */ }
}
@media screen and (max-width: 40.00625em) { /* 640.1/16 = 40.00625em */ .menu-close:hover { cursor: pointer; }
}
/* ******************************************************* * Media Query Large Screens ******************************************************* */
@media screen and (min-width: 40.00625em) { /* 640.1/16 = 40.00625em */ .js .menu-close { display: none; } .js #menu-trigger { display: none; } .navigation { display: inline-block; width: 100%; }
}

Off Canvas Overlay Full Screen - Script Codes JS Codes

$('body').addClass('js');
$('#menu-trigger').on('click', function(e) { e.preventDefault(); $('.navigation').toggleClass('off-canvas--hide off-canvas--show'); $('.navigation').attr('aria-hidden', 'false');
});
$('.menu-close').on('click', function() { $('.navigation').toggleClass('off-canvas--hide off-canvas--show'); $('.navigation').attr('aria-hidden', 'true');
});
$(window).resize(function() { if($(window).width() > 640) { $('.navigation').removeClass('off-canvas--show'); $('.navigation').attr('aria-hidden', 'false'); } else { $('.navigation').addClass('off-canvas--hide'); $('.navigation').attr('aria-hidden', 'true'); }
});
Off Canvas Overlay Full Screen - Script Codes
Off Canvas Overlay Full Screen - Script Codes
Home Page Home
Developer GRAY GHOST
Username grayghostvisuals
Uploaded June 23, 2022
Rating 3.5
Size 5,270 Kb
Views 54,648
Do you need developer help for Off Canvas Overlay Full Screen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

GRAY GHOST (grayghostvisuals) Script Codes
Name
Custom ChartJS Gradient
How to ChartJS
Polybird
RWD Accordion
Water
Secure Input
Sticky Scroll
Fixed Curtains
Rotating Rainbow Donut
Bouncy Little Dribbble Preloader
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!