It is known that the slide out menus ( or hamburger menus ) are the best way of making a menu usable for mobile.
This method uses jQuery in order to clone the markup of the desktop version menu, and make it slide out. Check out the demo.
<body> <div id="container"> <div id="header"> <div id="navigation"> <ul> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> </ul> </div> <span id="toggle-menu">Menu</span> </div> </div> </body>
$('#navigation').clone().prependTo('body').addClass('mobile-navigation').removeAttr('id');
$('div.mobile-navigation').prepend('<span class="close">Close</span>');
$('#toggle-menu').bind('click touch', function(){
if( $('div.mobile-navigation').hasClass('open') ){
$('div.mobile-navigation').animate({width: "0px"}, 300).removeClass('open');
$('#container').animate({left: "0px"}, 300);
} else {
$('div.mobile-navigation').animate({width: "210px"}, 300).addClass('open');
$('#container').animate({left: "-210px"}, 300);
}
});
$('div.mobile-navigation span.close').bind('click touch', function(){
$('div.mobile-navigation').animate({width: "0px"}, 300).removeClass('open');
$('#container').animate({left: "0px"}, 300);
});
#container {
position: relative;
width: 100%;
}
.mobile-navigation {
width: 0;
height: 100%;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 200;
}