<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 ----------> <div class="menu-button"> <button class="nav_toggle" id="nav">MENU</button> </div> <aside id="mb_nav" class="nav"> <ul> <li><a class="nav__link" href="">Home</a></li> <li><a class="nav__link" href="">Concept</a></li> <li><a class="nav__link" href="">Gallery</a></li> <li><a class="nav__link" href="">Contact</a></li> </ul> </aside> <section></section> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script> // Timeline created and paused var tl = gsap.timeline({ paused: true }); function openNav() { animateOpenNav(); var navBtn = document.getElementById("nav"); navBtn.onclick = function (e) { // Toggle reversed to it's opposite value tl.reversed(!tl.reversed()); // Use the toggle method in the classList API navBtn.classList.toggle("active"); }; } function animateOpenNav() { var mobileNav = document.getElementById("mb_nav"); tl .to(mobileNav, { duration: 0.6, ease: "sine", y: 0 }) .set('body', { overflow: 'hidden' }) .to(".nav__link", { opacity: 1, ease: "power3.out", y: 0, duration: 0.8, stagger: 0.2, }) .reverse(); // Finally reverse the timeline. reversed() is true } // init openNav(); </script>

body { position: relative; font-family: 'helvetica', cursive;sans-serif; font-weight: 400; text-transform: uppercase; margin: 0; padding: 0; background-color: grey; } /** styling nav button **/ .nav_toggle { z-index: 999; position: relative; display: inline-block; margin: 15px; color: white; border: 1px solid white; background-color: transparent; padding: 5px; height: 50px; width: 100px; text-align: center; transition: all 0.3s ease-in-out; } .nav_toggle:hover { background-color: white; color: black; cursor: pointer; } .nav_toggle.active { color: white; border-color: white; } .nav_toggle.active:hover { background-color: white; color: black; } /** styling mobile nav **/ .nav { z-index: 10; position: absolute; top: 0; right: 0; height: 100vh; width: 100vw; background-color: black; list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; transform: translateY(-100%); overflow-y:scroll; overflow-x: hidden; } .nav li { list-style-type: none; padding: 0; margin: 0; text-align: center; overflow: hidden; } .nav li a { font-size: 50px; line-height: 1.8; display: inline-block; color: white; opacity: 0; text-decoration: none; transform: translateY(75px); } .nav li a:hover { color: grey; } .nav, .menu-button { position: fixed; top: 0; left: 0; } .menu-button { z-index: 999; } section { height: 300vh; }