<div id="page">
<div id="toggle">
<div class="bar"></div>
</div>
<section id="overlay">
<nav>
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</section>
</div>
* {
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
#toggle {
position: absolute;
top: 30px;
right: 30px;
width: 30px;
height: 21px;
cursor: pointer;
z-index: 1000;
}
#toggle div.bar,
#toggle div.bar:before,
#toggle div.bar:after {
width: 100%;
height: 3px;
background: #333;
}
#toggle div.bar {
position: relative;
transform: translateY(9px);
transition: all 0.3s 0.3s ease;
}
#toggle div.bar:before {
content: " ";
position: absolute;
bottom: 9px;
transition: bottom 0.3s 0.3s ease, transform 0.3s ease;
}
#toggle div.bar:after {
content: " ";
position: absolute;
top: 9px;
transition: top 0.3s 0.3s ease, transform 0.3s ease;
}
/* Animation */
#toggle div.bar.animate {
background: rgba(255, 255, 255, 0);
}
#toggle div.bar.animate:after {
top: 0;
transform: rotate(45deg);
transition: top 0.3s ease, transform 0.3s 0.3s ease;
}
#toggle div.bar.animate:before {
bottom: 0;
transform: rotate(-45deg);
transition: bottom 0.3s ease, transform 0.3s 0.3s ease;
}
#overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease, max-height 0s 0.6s ease;
z-index: 100;
opacity: 1;
background: black;
}
#overlay nav {
position: absolute;
bottom: 30px;
left: 30px;
}
#overlay nav ul,
#overlay nav ul li {
margin: 0;
padding: 0;
display: block;
position: static;
}
#overlay nav ul {
padding: 30px;
}
#overlay nav ul li {
margin-bottom: 10px;
opacity: 0;
transition: all 0.9s 0s ease;
margin-left: 60px;
}
.
.
.
