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");
});
});
