"Full screen slide menu"
Bootstrap 4.1.1 Snippet by sumi9xm

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <main> <h1>Full-Screen Pushing Navigation</h1> <p>A full page menu, that replaces the current content by pushing it off the screen.</p> </main> <a href="#cd-nav" class="cd-nav-trigger">Menu <span class="cd-nav-icon"></span> <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54"> <circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle> </svg> </a> <div id="cd-nav" class="cd-nav"> <div class="cd-navigation-wrapper"> <div class="cd-half-block"> <h2>Navigation</h2> <nav> <ul class="cd-primary-nav"> <li><a href="#0" class="selected">The team</a></li> <li><a href="#0">Our services</a></li> <li><a href="#0">Our projects</a></li> <li><a href="#0">Start a project</a></li> <li><a href="#0">Contact us</a></li> </ul> </nav> </div><!-- .cd-half-block --> <div class="cd-half-block"> <address> <ul class="cd-contact-info"> <li><a href="mailto:info@myemail.co">info@myemail.co</a></li> <li>0244-12345678</li> <li> <span>MyStreetName 24</span> <span>W1234X</span> <span>London, UK</span> </li> </ul> </address> </div> <!-- .cd-half-block --> </div> <!-- .cd-navigation-wrapper --> </div> <!-- .cd-nav -->
/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; } html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: 1.6rem; font-family: "Open Sans", sans-serif; color: #243040; background-color: #ffffff; } body, html { /* prevent horizontal scrolling */ overflow-x: hidden; } a { color: #9cb3a8; text-decoration: none; } /* -------------------------------- Main Components -------------------------------- */ main { position: relative; z-index: 2; /* fix bug on iOS */ height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 200px 5%; background-color: #3F51B5; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); } main h1, main p { text-align: center; } main h1 { font-size: 2.6rem; margin-bottom: 1em; } main p { font-family: "Merriweather", serif; color: #d6dfdb; max-width: 450px; margin: 0 auto; line-height: 1.6; } .navigation-is-open main { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } @media only screen and (min-width: 768px) { main { padding: 250px 10%; } main h1 { font-size: 3.6rem; } main p { font-size: 2rem; } } .cd-nav-trigger { position: fixed; z-index: 3; left: 5%; top: 20px; height: 54px; width: 54px; background-color: #795548; border-radius: 50%; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; } .cd-nav-trigger .cd-nav-icon { /* icon created in CSS */ position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 22px; height: 2px; background-color: #ffffff; } .cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after { /* upper and lower lines of the menu icon */ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: inherit; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s; -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s; transition: transform 0.5s, width 0.5s, top 0.3s; } .cd-nav-trigger .cd-nav-icon::before { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); } .cd-nav-trigger .cd-nav-icon::after { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } .no-touch .cd-nav-trigger:hover .cd-nav-icon::after { top: 2px; } .no-touch .cd-nav-trigger:hover .cd-nav-icon::before { top: -2px; } .cd-nav-trigger svg { position: absolute; top: 0; left: 0; } .cd-nav-trigger circle { /* circle border animation */ -webkit-transition: stroke-dashoffset 0.4s 0s; -moz-transition: stroke-dashoffset 0.4s 0s; transition: stroke-dashoffset 0.4s 0s; } .navigation-is-open .cd-nav-trigger { /* rotate trigger when navigation becomes visible */ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .navigation-is-open .cd-nav-trigger .cd-nav-icon::after, .navigation-is-open .cd-nav-trigger .cd-nav-icon::before { /* animate arrow --> from hamburger to arrow */ width: 50%; -webkit-transition: -webkit-transform 0.5s, width 0.5s; -moz-transition: -moz-transform 0.5s, width 0.5s; transition: transform 0.5s, width 0.5s; } .navigation-is-open .cd-nav-trigger .cd-nav-icon::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .navigation-is-open .cd-nav-trigger .cd-nav-icon::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before { top: 0; } .navigation-is-open .cd-nav-trigger circle { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.4s 0.3s; -moz-transition: stroke-dashoffset 0.4s 0.3s; transition: stroke-dashoffset 0.4s 0.3s; } @media only screen and (min-width: 1170px) { .cd-nav-trigger { top: 40px; } } .cd-nav { position: fixed; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background-color: #795548; visibility: hidden; -webkit-transition: visibility 0s 0.7s; -moz-transition: visibility 0s 0.7s; transition: visibility 0s 0.7s; } .cd-nav .cd-navigation-wrapper { /* all navigation content */ height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 40px 5% 40px calc(5% + 80px); /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); } .navigation-is-open .cd-nav { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; } .navigation-is-open .cd-nav .cd-navigation-wrapper { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); } .cd-nav h2 { position: relative; margin-bottom: 1.7em; font-size: 1.3rem; font-weight: 800; color: #080b0f; text-transform: uppercase; } .cd-nav h2::after { /* bottom separation line */ content: ''; position: absolute; left: 0; bottom: -20px; height: 1px; width: 60px; background-color: currentColor; } .cd-nav .cd-primary-nav { margin-top: 60px; } .cd-nav .cd-primary-nav li { margin: 1.6em 0; } .cd-nav .cd-primary-nav a { font-family: "Merriweather", serif; font-size: 2.4rem; color: rgba(255, 255, 255, 0.3); display: inline-block; } .cd-nav .cd-primary-nav a.selected { color: #ffffff; } .no-touch .cd-nav .cd-primary-nav a:hover { color: #ffffff; } .cd-nav .cd-contact-info { margin-top: 80px; } .cd-nav .cd-contact-info li { font-family: "Merriweather", serif; margin-bottom: 1.5em; line-height: 1.2; color: rgba(255, 255, 255, 0.3); } .cd-nav .cd-contact-info a { color: #ffffff; } .cd-nav .cd-contact-info span { display: block; } .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span { font-size: 1.6rem; } @media only screen and (min-width: 1170px) { .cd-nav .cd-navigation-wrapper { padding: 62px 20%; } .cd-nav .cd-navigation-wrapper::after { clear: both; content: ""; display: table; } .cd-nav .cd-half-block { width: 50%; float: left; } .cd-nav .cd-primary-nav { margin-top: 0; } .cd-nav h2 { font-size: 1.5rem; margin-bottom: 5.6em; } .cd-nav .cd-primary-nav li { margin: 2em 0; } .cd-nav .cd-primary-nav a { font-size: 4.4rem; } .cd-nav .cd-contact-info { margin-top: 120px; text-align: right; } .cd-nav .cd-contact-info li { margin-bottom: 2.4em; } .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span { font-size: 2rem; } } .no-js main { height: auto; overflow: visible; } .no-js .cd-nav { position: static; visibility: visible; } .no-js .cd-nav .cd-navigation-wrapper { height: auto; overflow: visible; padding: 100px 5%; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
jQuery(document).ready(function($){ var isLateralNavAnimating = false; //open/close lateral navigation $('.cd-nav-trigger').on('click', function(event){ event.preventDefault(); //stop if nav animation is running if( !isLateralNavAnimating ) { if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true; $('body').toggleClass('navigation-is-open'); $('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ //animation is over isLateralNavAnimating = false; }); } }); });

Related: See More


Questions / Comments: