<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://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> <div id="main"> <svg version="1.1" id="nav" onclick="menuIn()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="85.387 0 671.116 595.281" enable-background="new 85.387 0 671.116 595.281" xml:space="preserve"> <rect id="burger1" x="85.387" y="0" fill="#333333" width="671.116" height="119.459"/> <rect id="burger2" x="85.387" y="236.233" fill="#333333" width="671.116" height="119.459"/> <rect id="burger3" x="85.387" y="475.822" fill="#333333" width="671.116" height="119.459"/> </svg> </div> <div id="menu">OUT FROM UNDER</div> <script> var menu = new TimelineMax({paused:true, reversed:true}) menu .to("#burger1", .5, {rotation: 45, transformOrigin: "left 50%", ease:Power2.easeInOut}, "cross") .to("#burger2", .5, {autoAlpha: 0}, "cross") .to("#burger3", .5, {rotation: -45, transformOrigin: "left 50%", ease:Power2.easeInOut}, "cross") .to("#main", 0.75, {x: "-300px", ease:Power2.easeInOut}) function menuIn() { menu.reversed() ? menu.play() : menu.reverse(); } </script>

#main { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; padding: 1em; background-color: #F1F1F1; box-sizing: border-box; } #menu { position: absolute; width: 300px; background-color: #333; padding: 1em; box-sizing: border-box; height: 100%; right: 0; top: 0; z-index: 0; text-align: left; font-family: 'arial'; color: #F1F1F1; font-weight: bold; font-size: 20px; } #nav { position: absolute; top: 0; right: 0; z-index: 2000; height: 4em; padding: 1em; box-sizing: border-box; cursor: pointer; } #nav:hover { opacity: .6; }