<div class="wrapper">
<div class="menu">
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">And a second</a></li>
<li><a href="#">Go for a third</a></li>
<li><a href="#">The last</a></li>
</ul>
</div>
<div class="main">
<div class="button">
<div id="burger">
<div class="click"></div>
<span></span>
</div>
</div>
<div class="main_content">
<h1>Animation for a side menu</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400);
* {
margin: 0;
padding: 0;
outline: none;
list-style: none;
color: #fff;
text-decoration: none;
font-weight: 400;
white-space: collapse;
font-family: 'PT Sans';
font-size: 20px;
}
body {
overflow: hidden;
background-color: #2F2933;
}
h1 {
color: #01a2a6;
font-size: 25px;
margin-bottom: 25px;
font-weight: bold;
}
.main {
width: 100%;
background-color: #2F2933;
height: 100%;
}
.main .main_content {
width: 400px;
display: block;
padding: 0px 0px 0px 50px;
transition: 0.5s cubic-bezier(0.75, 0.02, 0.33, 1);
}
.main .button {
padding: 50px 0px 0px 50px;
transition: 0.5s cubic-bezier(0.75, 0.02, 0.33, 1);
}
.main .button #burger {
width: 40px;
}
.menu {
position: absolute;
width: 0px;
display: block;
transition: 0.5s cubic-bezier(0.75, 0.02, 0.33, 1);
background-color: #01a2a6;
height: 100%;
}
.menu ul {
padding-top: 180px;
}
.menu ul li {
display: none;
transform: translateY(-40px);
opacity: 0;
text-align: center;
position: relative;
margin-bottom: 30px;
transition: .5s ease;
}
.menu ul li a {
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
}
.click {
width: 40px;
height: 40px;
position: absolute;
top: -20px;
z-index: 99;
cursor: pointer;
display: block;
}
#burger {
z-index: 1;
cursor: pointer;
position: relative;
margin-bottom: 100px;
margin-top: 15px;
display: block;
}
#burger span {
position: relative;
display: block;
width: 40px;
height: 5.5px;
background: url('http://img4.hostingpics.net/pics/293168burger1.png');
background-size: cover;
transition: all .4s ;
}
#burger span:before,
#burger span:after {
position: absolute;
background: url('http://img4.hostingpics.net/pics/293168burger1.png');
background-size: cover;
content: '';
width: 40px;
height: 5.5px;
transition: all .2s ease;
}
#burger span:before {
top: -15px;
}
#burger span:after {
top: 15px;
}
#burger.active span {
background: transparent;
transform: rotate(90deg);
}
#burger.active span:before {
transform: rotate(45deg);
top: 0px;
}
#burger.active span:after {
transform: rotate(-45deg);
top: 0px;
}
.menu_open .menu {
width: 400px;
}
.menu_open .main_content {
transform: translateX(400px);
}
.menu_open .button {
transform: translateX(130px);
}
jQuery(document).ready(function(){
var $listMenu = $('.menu ul li');
$('.click').click(function(){
$('#burger').toggleClass('active');
$('.wrapper').toggleClass('menu_open');
if ($('#burger').hasClass('active')) {
$listMenu.show();
setTimeout(function(){
$listMenu.css('opacity','1');
$listMenu.css('transform','translateY(0px)');
}, 200);
} else {
$listMenu.css('opacity','0');
$listMenu.css('transform','translateY(-40px)');
setTimeout(function(){
$listMenu.hide();
}, 500);
}
return false;
});
});