"fulscreen nav"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<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 ----------> <h1> FullScreen Navigation </h1> <div class="toggle"> <!-- toggle-btn to toggle --> <span class="top"></span> <!-- one to top --> <span class="bottom"></span> <!-- two to bottom --> </div> <div class="menu"> <div class="data"> <ul> <li>Directory</li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script> var tl = new TimelineMax({paused: true}) tl.to(".top", 0.8, { y: 6, rotation: 45, ease: Expo.easeInOut }); tl.to(".bottom", 0.8, { y: -6, rotation: -45, ease: Expo.easeInOut, delay: -0.8 }); tl.to(".menu", 1, { top: "0%", ease: Expo.easeInOut, delay: -1 }); tl.staggerFrom(".menu ul li", 2, {x: -200, opacity: 0, ease: Expo.easeOut}, 0.3); tl.reverse(); //toggle $(document).on("click", ".toggle", function () { tl.reversed(!tl.reversed()); }); </script>
@import url("https://fonts.googleapis.com/css?family=Nunito"); @import url("https://fonts.googleapis.com/css?family=Poppins"); html, body { margin: 0; padding: 0; width: 100%; height: 100vh; } body { font-family: 'Nunito'; color: #333333; } h1 { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; } .toggle { position: fixed; margin: 1.4em; padding: 1em; width: 40px; height: 12px; right: 0; z-index: 1; cursor: pointer; } span.top, span.bottom { position: absolute; width: 40px; height: 3px; background-color: #333333; } span.bottom { margin-top: 12px; } .menu { position: absolute; z-index: 0; background-color: #202020; height: 100vh; width: 100%; top: -100%; } .data { padding: 8em 0 0 2em; text-align: left; } ul { list-style: none; } li:first-child { color: grey; font-size: 24px; } li:not(:first-child) { color: #FFFFFF; font-size: 42px; } a { text-decoration: none; color: #FFFFFF; } a:hover { color: #333333; transition: 0.5s all; }

Related: See More


Questions / Comments: