Slide out mobile menu

by mcannon

HTML

<div id="wrap">
		<div id="leftMenu">
			<ul>
			    <li><a href="#">Menu Item 1</a></li>
			    <li><a href="#">Menu Item 2</a></li>
			    <li><a href="#">Menu Item 3</a></li>
			    <li><a href="#">Menu Item 4</a></li>
			    <li><a href="#">Menu Item 5</a></li>
			    <li><a href="#">Menu Item 6</a></li>
			    <li><a href="#">Menu Item 7</a></li>
			    <li><a href="#">Menu Item 8</a></li>
			    <li><a href="#">Menu Item 9</a></li>
			    <li><a href="#">Menu Item 10</a></li>
			    <li><a href="#">Menu Item 11</a></li>
			    <li><a href="#">Menu Item 12</a></li>
			    <li><a href="#">Menu Item 13</a></li>
			    <li><a href="#">Menu Item 14</a></li>
			    <li><a href="#">Menu Item 15</a></li>
			    <li><a href="#">Menu Item 4</a></li>
			    <li><a href="#">Menu Item 5</a></li>
			    <li><a href="#">Menu Item 6</a></li>
			    <li><a href="#">Menu Item 7</a></li>
			    <li><a href="#">Menu Item 8</a></li>
			    <li><a href="#">Menu Item 9</a></li>
			    <li><a href="#">Menu Item 10</a></li>
			    <li><a href="#">Menu Item 11</a></li>
			    <li><a href="#">Menu Item 12</a></li>
			</ul>
		</div>
    
		<div id="content_wrapper">
        <div id="menubar">
            <div id="leftMenuButton">&gt;</div>
            <div id="brand">
                XYZ Agency
            </div>
            <div id="rightMenuButton">&lt;</div>
        </div>
        
            <div id="loading-pane"></div>
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum...

CSS

* {
    padding: 0px;
    margin: 0px;
}
p {padding:10px;}

#bottomMenubar, #menubar {
    width:100%;
    background-color:#444;
    color: #fff;
    z-index: 999;
    display: inline-block;
}
	
#bottomMenubar {
    margin-top: -30px;    /* negative value of footer height */
    position: fixed;
    bottom: 0;
    height: 30px;
    clear:both;
    width:100%;
}

#rightMenuButton, #leftMenuButton {
    display: inline-block !important;
    padding: 10px;
    cursor:pointer;
    background-color: #686868;
}

#leftMenu,#rightMenu {
    overflow-y: auto;
    position: fixed;
}

#leftMenu li a,
#rightMenu li a{
    padding: 10px;
    display: block;
    color: white;
    text-decoration: none;
}

#leftMenu ul,
#rightMenu ul
 {padding: 0;}
 
#leftMenu li,
#rightMenu li
 {list-style-type: none;}

#content {
    overflow-y: auto;
    width: 100%;
    height: 100%;
    position: fixed;
    margin: 30px 0;
    padding: 30px 0 90px 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 888;
    background-color: #FFF;
   /* padding-bottom: 30px;  must be same height as the footer */
}

#menubar {
  margin-bottom: 30px;    /* negative value of footer height */
  position: fixed;
  top: 0;
  height: 30px;
  clear:both;
  width:100%;
}

#content_wrapper {
    width:100%;
    background-color: #fff;
    z-index: 5;
    height: 100%;
    -webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
        moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
          o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
            box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}

#leftMenu, #rightMenu {
    float:left;
    width: 250px;
    height: 100%;
    background-color: #999;
    padding: 0;
    margin: 0;
}

#rightMenu, #rightMenuButton {
    float:right;
}

#leftMenu li,
#rightMenu li{
    background-color:#444;
    border-bottom: 1px solid #888;
}

#loading-pane, #menu-pane{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
   ...

JavaScript

/* Menu */
$('#leftMenuButton').click(function() {
    $('#rightMenu').css( "z-index" , 0 );
    $('#leftMenu').css( "z-index" , 1000 );
    $('#leftMenu').css( "left" , -250 );
    if($('#leftMenu').css( "z-index" ) === 0){
        $('#leftMenuButton').html('&lt;');
        $('#leftMenuButton').animate({ left: "+=250" }, 500, "swing");
        $('#leftMenu').animate({ left: 250 }, 500, "swing");
        $("#loading-pane").fadeIn(200);    // fast fade in of 200 mili-seconds
    }else{
        $('#leftMenuButton').html('&gt;');
        $('#leftMenuButton').animate({ left: "-=250" }, 500, "swing");
        $('#leftMenu').animate({ left: 0 }, 500, "swing");
        $("#loading-pane").fadeIn(200);    // fast fade in of 200 mili-seconds
    }
});

$('#loading-pane').click(function() {
    $(this).fadeOut(1000);    // slow fade out of 1 second
    $('#rightMenu').css( "z-index" , 0 );
    $('#leftMenu').css( "z-index" , 1000 );
    $('#leftMenu').css( "left" , -250 );
});
                           
$('#rightMenuButton').click(function() {
    $('#rightMenu').css( "right" , -250 );
    $('#leftMenu').css( "z-index" , 0 );
    $('#rightMenu').css( "z-index" , 1000 );
    
    if($('#rightMenu').css( "z-index" ) === 0){
        $('#rightMenuButton').html('&lt;');
        $('#rightMenuButton').animate({right: -250}, 500, "swing");
        $('#rightMenu').animate({right: "-=250"}, 500, "swing");
    }else{
        $('#rightMenuButton').html('&gt;');
        $('#rightMenuButton').animate({right: "+=250"}, 500, "swing");
        $('#rightMenu').animate({right: 0}, 500, "swing");
    }
});

/* Menu End */