HTML
<div class="container">
<a href="javascript:void(0);" class="resMenu active">
<span></span>
<span></span>
<span></span>
</a>
<div class='menu active'>
<ul>
<li><a href='#home' data-name="Home">Home</a></li>
<li><a href='#about-me' data-name="About me">About me</a></li>
<li><a href='#blog' data-name="Blog">Blog</a></li>
<li><a href='#links' data-name="Links">Links</a></li>
<li><a href='#sitemap' data-name="Sitemap">Sitemap</a></li>
</ul>
</div>
</div>
CSS
<style>
*{box-sizing:border-box;}
.resMenu{
display: block;position:relative;
float:right;
height: 25px;
width: 50px;}
.resMenu span{
width:100%;
height:2px;
background:red;
display:block;
position:relative;
position:absolute;
-moz-transition:all .2s ease;
-webkit-transition:all .2s ease;
transition:all .2s ease}
.resMenu span:nth-child(1){}
.resMenu span:nth-child(2){top:6px;}
.resMenu span:nth-child(3){top:12px;}
.resMenu.active span:nth-child(1){transform:rotate(45deg) translate(8px, 3px)}
.resMenu.active span:nth-child(2){
transform:scale(0);
-moz-transition:all .3s ease;
-webkit-transition:all .3s ease;
transition:all .3s ease}
.resMenu.active span:nth-child(3){transform:rotate(-45deg) translate(3px, -3px)}
.menu{/*display:none*/;clear:both}
.menu ul{list-style-type:none;}
.menu li {}
.menu li a{
text-decoration:none;
background:#99C;
color:#000;
padding:10px;
display:block;
text-align:center;
margin:2px 0;
text-transform:uppercase;
position:relative;}
.menu li a:before,.menu li a:after {
background: #f00 none repeat scroll 0 0;
bottom: -2px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 100%;
-moz-transition:all .4s ease;
-webkit-transition:all .4s ease;
transition:all .4s ease
}
.menu li a:after{
background:green;
width:0%;
}
.menu li a:hover:after{
width:100%;
}
</style>
Script
<script>
$(document).ready(function(){
$('.resMenu').click(function(){
$(this).toggleClass('active');
$('.menu').slideToggle();
})
})
</script>
