<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 ----------> <a id="nav-toggle" href="#"><span></span></a> <div class="box"> <div class="content"> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script> // menu var box = document.querySelector(".box"); var elements = document.querySelector("#nav-toggle"); var open = false; var tl = new TimelineMax(); tl.pause(); tl.fromTo(box, .7, {x: -2000, ease: Expo.easeOut}, {x: 0}, 0.2); tl.staggerFrom(".content ul li", .7, {autoAlpha: 0, y: -15, }, 0.2) elements.onclick = function () { this.classList.toggle("active"); if (open === false){ tl.play(); } if (open === true){ tl.reverse(); } open = !open } </script>

@import url(https://fonts.googleapis.com/css?family=Lato:300,400); body{ font-family: 'Lato'; font-size: 20px; background-color: #2e2e2e; color: #fff; width: 100%; height: 100%; padding: 0; margin: 0; } .box{ display: flex; width: 100vw; height: 100vh; background-color: black; color: white; justify-content: center; align-items: center; } .content{ font-size: 18pt; } ul{ list-style-type: none; } li{ margin-bottom: 15px; } #nav-toggle { background: transparent; position: absolute; right: 0; top: 5%; height: 50px; width: 50px; cursor: pointer; transform: translate(0%, -50%); z-index: 9999999999999; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 2px; width: 35px; background: white; position: absolute; left: 0; top: 50%; display: block; content: ''; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 0.5s ease-in-out; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(135deg); } #nav-toggle.active span:after { transform: rotate(-135deg); }