Slide out hamburger menu

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.

	<div id="container">
		<div id="header">
			<div id="navigation">
						<a href="#">Lorem Ipsum</a>
						<a href="#">Lorem Ipsum</a>
			<span id="toggle-menu">Menu</span>
$('').prepend('<span class="close">Close</span>');

$('#toggle-menu').bind('click touch', function(){
	if( $('').hasClass('open') ){
		$('').animate({width: "0px"}, 300).removeClass('open');
		$('#container').animate({left: "0px"}, 300);
	} else {
		$('').animate({width: "210px"}, 300).addClass('open');
		$('#container').animate({left: "-210px"}, 300);

$(' span.close').bind('click touch', function(){
	$('').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;

Check out demo.


  1. written by: Adam Marsh on May 31, 2016 at 8:13 am - Reply

    Hello Mihai,
    I love your menu. Simple and clever. Keep up the good work. :)

    • written by: Mihai on June 10, 2016 at 11:32 am - Reply

      Thanks Adam

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 3 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.