Mobile Menu

Here a example for Css Mobile Menu...

Demo

HTML

<a href="#toggle" class="menu"> 
        <span class="bun top"></span> 
        <span class="meat"></span> 
        <span class="bun bottom"></span> 
</a>

CSS

<style>
        .menu { 
                width: 100px; 
                height: 100px; 
                display: block; 
                -webkit-transition: .3s ease all; 
                transition: .3s ease all; 
        }
        .menu.menu-close {  
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        }
        .menu span { 
                display: block; 
                width: 100%; 
                background: #037cd5; 
                height: 15%; 
                border-radius: 50px;
                -webkit-transition: .3s ease all;
                transition: .3s ease all; 
        }
        .menu-close .top { 
                height: 40.5%; 
                width: 15%; 
                margin-left: 42.5%; 
                border-radius: 50px 50px 0 0; 
        }  
        .menu-close .bottom { 
                height: 40.5%; 
                width: 15%; 
                margin-left: 42.5%; 
                border-radius: 0 0 50px 50px; 
        }
        .meat { 
                margin: 20px 0; 
        }
        .menu-close .meat {  
                margin:2% 0; 
        }
</style>

Javascript

$('.menu').click(function(){
        $(this).toggleClass('menu-close');
});