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