<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="menu"> <span class="line one"></span> <span class="line two"></span> <span class="line three"></span> </div> </div>

*{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; background-color: #e3f2fd; } .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80px; width: 90px; border-radius: 6px; background-color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.15); display: flex; justify-content: center; cursor: pointer; transition: all 0.4s linear; overflow: hidden; } .container.active{ background-color: #fecd03; } .container .menu{ position: relative; height: 100%; width: 65px; display: flex; align-items: center; justify-content: center; } .menu .line{ position: absolute; height: 8px; width: 100%; border-radius: 6px; background-color: #2c3e50; transition: all 0.4s linear; } .menu .line.one{ top: 15px; } .container.active .line.one{ top: 50%; transform: translateY(-50%) rotate(45deg); background-color: #fff; } .menu .line.three{ bottom: 15px; } .menu .line.two{ left: 0; opacity: 1; } .container.active .line.two{ left: -100%; opacity: 0; background-color: #de0611; } .container.active .line.three{ bottom: 50%; transform: translateY(50%) rotate(-45deg); background-color: #fff; }

let hamMenu = document.querySelector(".container"); hamMenu.addEventListener("click", () => { hamMenu.classList.toggle("active"); });