Overlay Menu

HTML
<h1 class="info">CLICK ON THE MENU BUTTON</h1> <div class="menu"> <span class="menu-circle"></span> <a href="#" class="menu-link"> <span class="menu-icon"> <span class="menu-line menu-line-1"></span> <span class="menu-line menu-line-2"></span> <span class="menu-line menu-line-3"></span> </span> </a> </div> <div class="menu-overlay"> <h1 class="overlay-info"> YOU CAN ADD YOUR MENU HERE. <br> I USED THIS GIF INSTEAD. :) </h1> <img src="http://i.giphy.com/l41YqNeoHIVsBHEnm.gif" alt="just a gif"> </div>
CSS
html { margin: 0; padding: 0; } body { margin: 0; padding: 0; background: #D673B5; font-family: Helvetica Neue, Arial, sans-serif; color: #fff; overflow: hidden; } .menu { position: absolute; top: 20px; left: 20px; height: 46px; width: 46px; } .menu-link { width: 100%; height: 100%; position: absolute; z-index: 1002; } .menu-icon { position: absolute; width: 20px; height: 14px; margin: auto; left: 0; top: 0; right: 0; bottom: 1px; } .menu-line { background-color: #333; height: 2px; width: 100%; border-radius: 2px; position: absolute; left: 0; transition: all 0.25s ease-in-out; } .menu-line-2 { top: 0; bottom: 0; margin: auto; } .menu-line-3 { bottom: 0; } .menu.open .menu-line-1 { transform: translateY(7px) translateY(-50%) rotate(-45deg); } .menu.open .menu-line-2 { opacity: 0; } .menu.open .menu-line-3 { transform: translateY(-7px) translateY(50%) rotate(45deg); } .menu-circle { background-color: #fff; width: 100%; height: 100%; position: absolute; border-radius: 50%; transform: scale(1); z-index: 1000; transition: transform 0.3s ease-in-out; } .menu:hover .menu-circle { transform: scale(1.5); } .menu.open .menu-circle { transform: scale(60); } .menu-overlay { background-color: #fff; color: #333; height: 100%; width: 100%; position: fixed; text-align: center; transition: opacity 0.2s ease-in-out; z-index: 1001; opacity: 0; visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .menu-overlay.open { opacity: 1; visibility: visible; } .info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .overlay-info { color: #111825; }
JAVASCRIPT
$(function() { $(".menu-link").click(function(e) { e.preventDefault(); $(".menu-overlay").toggleClass("open"); $(".menu").toggleClass("open"); }); });
Expand for more options Login