"burger menu"
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 ----------> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <h1>Burger Navigation</h1> <div class="nav"> <div class="toggle-btn"> <span class="one"></span> <span class="two"></span> </div> <div class="menu"> <div class="data"> <ul> <li>Navigation</li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <div class="example"> </div> <script> var t1 = new TimelineMax({paused: true}); t1.to(".one", 0.8, { y: 6, rotation: 45, ease: Expo.easeInOut }); t1.to(".two", 0.8, { y: -6, rotation: -45, ease: Expo.easeInOut, delay: -0.8 }); t1.to(".menu", 2, { top: "0%", ease: Expo.easeInOut, delay: -2 }); t1.staggerFrom(".menu ul li", 2, {x: -200, opacity: 0, ease:Expo.easeOut}, 0.3); t1.reverse(); $(document).on("click", ".toggle-btn", function() { t1.reversed(!t1.reversed()); }); $(document).on("click", "a", function() { t1.reversed(!t1.reversed()); }); </script>
html, body { margin: 0; padding: 0; width: 100%; } h1 { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 48px; font-weight: lighter; } .nav{ background: #042b42; height: 100vh; } .example{ height: 100vh; background-color: blue; } .toggle-btn { position: fixed; margin: 1.4em; padding: 1em; width: 40px; height: 12px; right: 0; z-index: 1; cursor: pointer; } span.one { position: absolute; width: 40px; height: 2px; background: #fff; } span.two { position: absolute; width: 40px; height: 2px; background: #fff; margin-top: 12px; } .menu { z-index: 0; position: fixed; background: #101010; 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-family: Poppins; font-size: 24px; } li:not(:first-child) { color: #fff; font-size: 42px; } a { text-decoration: none; color: #fff; font-family: Poppins; }

Related: See More


Questions / Comments: