jQuery Mobile Slide Menu

fiddle.css

#side-menu {
	width: 165px;
	height: 100%;
	display: block !important;
	float: left;
	visibility: hidden;
	background-color: #000000;
}
#side-menu ul {
	margin: 0;
	padding: 0;
	width: inherit;
}
#side-menu ul li {
	list-style-type: none;
	margin: 0px 0;
	/*border-bottom: solid #6d6d6d 1px;*/
}
#side-menu ul li a:link, #side-menu ul li a:visited {
	border-bottom: solid #333 1px;
	color: #fff;
	font-size: 14px;
	font-family: arial;
	text-decoration: none;
	width: 165px;
	display: block;
	padding: 10px 0px 10px 10px;
	text-shadow: 0px 1px 1px #000000;
}
#side-menu ul li a:hover, #side-menu ul li a:active {
	background-color: #716f6f;
}
#side-menu ul li a:hover span.icon {
	background-position: 0 -40px !important;
}
#side-menu li a span.icon {
	float: right;
	width: 21px;
	height: 20px;
	background: transparent url('images/menu/menuIconsSprite.png') 0 0 no-repeat;
	position: relative;
	right: 20px;
	top: -2px;
}

fiddle.html

<div id="side-menu">
	<ul>
		<li><a href="/">Main</a><span class="icon"></span></li>
		<li><a href="/page-2/">Page 2</a><span class="icon"></span></li>
		<li><a href="/page-3/">Page 3</a><span class="icon"></span></li>
		<li><a href="/page-4/">Page 4</a><span class="icon"></span></li>
	</ul>
</div>
<div data-role="page" id="about-the-band" data-title="Page Title" data-theme="b" class="pages">
	<div data-role="header" data-theme="b">
		<a href="#" class="showMenu" data-role="button" data-icon="grid" data-iconpos="notext">Menu</a>
		<h1>Header</h1>
	</div>
	
	<div data-role="content">
		<p>Content Goes Here</p>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		$('#side-menu').slideMenu();
	});
</script>

fiddle.js

/*
 * jQuery Mobile Slide Menu 1.0.0, jQuery Mobile plugin
 * https://github.com/donwalter/jquery-mobile-slide-menu
 *
 * Copyright(c) 2013, Don Walter
 * http://www.don-walter.com/
 *
 * A side aligned sliding menu for jQuery Mobile
 * Licensed under the MIT License
 */

(function($){
	$.fn.slideMenu = function(options) {  
		// If options exist, merge them with the default settings
		options = $.extend({
			duration:	500,
			easing:		'swing'
		}, options);
		
		return this.each(function() {
			var obj = $(this);
			
			var menuStatus = false;
		
			$(document).on('click', 'a.showMenu', function(e) {
				if(!menuStatus){
					$('#side-menu').css('visibility','visible');
					$('.ui-page-active').animate({
						marginLeft: '165px',
					}, options.duration, options.easing, function(){menuStatus = true});
					return false;
				} else {
					$('.ui-page-active').animate({
						marginLeft: '0px',
					}, options.duration, options.easing, function(){menuStatus = false});
					return false;
				}
			});
		
			$(document).on('swipeleft', '.pages', function(e) {
				if (menuStatus){
					$('.ui-page-active').animate({
						marginLeft: '0px',
					}, options.duration, options.easing, function(){menuStatus = false; $('#side-menu').css('marginTop', $(window).scrollTop());});
				}
			});
		
			$(document).on('swiperight', '.pages', function(e) {
				if (!menuStatus){
					//alert($(window).scrollTop() + ' - ' + $('#side-menu').offset().top);
					$('#side-menu').css('marginTop', $(window).scrollTop());
					$('#side-menu').css('visibility','visible');
					$('.ui-page-active').animate({
						marginLeft: '165px',
					}, options.duration, options.easing, function(){menuStatus = true});
				}
			});
		
			$('#side-menu li a').click(function(){
				var p = $(this).parent();
				if($(p).hasClass('active')){
					$('#side-menu li').removeClass('active');
				} else {
					$('#side-menu li').removeClass('active');
					$(p).addClass('active');
				}
				menuStatus = false;
			});
		});
	};
})(jQuery);

fiddle.manifest

name: jQuery Mobile Slide Menu
description: A side aligned sliding menu for jQuery Mobile
authors:
- Don Walter
resources:
- http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js
- http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css
normalize_css: no

http://jsfiddle.net/gh/gist/jquery/1.9.1/5624435/