Responsive push-in menu

by Arete

HTML

<!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="layout">
        <!-- Menu toggle -->
         <a class="menu-link" href="#menu" id="menuLink"><!-- Hamburger icon -->
         <span></span></a>
        <div id="menu">
            Ut aliquip minim et ullamco in pariatur eu quis veniam cupidatat eiusmod ad tempor velit officia.
        </div>
        <div id="main">
            Ex dolore officia in anim pariatur labore anim id culpa irure sint officia. Lorem ipsum enim consequat duis sit adipisicing veniam aute mollit sint dolor fugiat commodo. Sunt aliqua in incididunt minim commodo in in commodo do dolore laboris labore sit aliqua aute ex minim. Lorem ipsum ut consectetur dolor reprehenderit proident laboris culpa dolore officia duis anim. Lorem ipsum tempor anim tempor sunt sint officia amet nisi eu nostrud quis dolor qui ex. In duis culpa dolore irure aute proident non eiusmod laboris pariatur qui.
        </div>

CSS

/*
                   Add transition to containers so they can push in and out.
                   */
                   
                   #layout,
                   #menu,
                   .menu-link {
                       -webkit-transition: all 0.2s ease-out;
                       -moz-transition: all 0.2s ease-out;
                       -ms-transition: all 0.2s ease-out;
                       -o-transition: all 0.2s ease-out;
                       transition: all 0.2s ease-out;
                   }
                   /*
                   This is the parent `<div>` that contains the menu and the content area.
                   */
                   
                   #layout {
                       position: relative;
                       left: 0;
                       padding-left: 0;
                   }
                   
                   #layout.active #menu {
                       left: 150px;
                       width: 150px;
                   }
                   
                   #layout.active .menu-link {
                       left: 150px;
                   }

                   /*
                   The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
                   appears on the left side of the page.
                   */
                   
                   #menu {
                       margin-left: -150px;
                       /* "#menu" width */
                       width: 150px;
                       position: fixed;
                       top: 0;
                       left: 0;
                       bottom: 0;
                       z-index: 1000;
                       /* so the menu or its navicon stays above all content */
                       background: silver;
                       overflow-y: auto;
                       -webkit-overflow-scrolling: touch;
                   }

                   
                   /* -- Dynamic Button For Responsive Menu...

JavaScript

( function( window, document ) {

	var layout = document.getElementById( 'layout' )
		, menu = document.getElementById( 'menu' )
		, menuLink = document.getElementById( 'menuLink' )
		, content = document.getElementById( 'main' );

	function toggleClass( element, className ) {
		var classes = element.className.split( /\s+/ )
			, length = classes.length
			, i = 0;

		for ( ; i < length; i++ ) {
			if ( classes[ i ] === className ) {
				classes.splice( i, 1 );
				break;
			}
		}
		// The className is not found
		if ( length === classes.length ) {
			classes.push( className );
		}

		element.className = classes.join( ' ' );
	}

	function toggleAll( e ) {
		var active = 'active';

		e.preventDefault();
		toggleClass( layout, active );
		toggleClass( menu, active );
		toggleClass( menuLink, active );
	}

	menuLink.onclick = function( e ) {
		toggleAll( e );
	};

	content.onclick = function( e ) {
		if ( menu.className.indexOf( 'active' ) !== -1 ) {
			toggleAll( e );
		}
	};

}( this, this.document ) );