Simple Sidebarは近代的なモバイルアプリのようなシンプルなサイドナビを作成できるjQueryプラグイン。

<div id="wrapper">
	<!--
	All your content must go here.
	This wrapper must be relative positioned, unless Simple-Sidebar won't work properly.
	* Every POSITION-FIXED ELEMENT must be positioned outside of this wrapper.
	* Every POSITION-ABSOLUTE ELEMENT must be positioned inside a POSITION-RELATIVE div.
	-->
</div>

<div id="navbar">
	<!--
	#navbar is positioned fixed.

	It does not matter what element #toggle-sidebar is, give it a selector (in this example #toggle-sidebar).
	-->
	<span id="toggle-sidebar" class="button icon"></span>
</div>

<div id="sidebar">
	<!--
	Simple-Sidebar will handle #sidebar's position.

	Links below are just an example. Give each clickable element, for example links, a class to trigger the closing animation.
	-->
	<a class="close-sidebar" href="#">Link</a>
	<a class="close-sidebar" href="#">Link</a>
	<a class="close-sidebar" href="#">Link</a>
	<a class="close-sidebar" href="#">Link</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="simple-sidebar/dist/jquery.simple-sidebar.min.js"></script>

<script>
	$(document).ready(function() {
		$('#sidebar').simpleSidebar({
			opener: '#button',
			wrapper: '#wrapper',
			sidebar: {
				align: 'left', //or 'right' - This option can be ignored, the sidebar will automatically align to right.
				width: 300, //You can ignore this option, the sidebar will automatically size itself to 300px.
				closingLinks: '.close-sidebar' // If you ignore this option, the plugin will look for all links and this can be buggy. Choose a class for every object inside the sidebar that once clicked will close the sidebar.
				css: {
					//Here you can add more css rules but you should use your own stylesheet.
					zIndex: 3000 //Choose the amount of zIndex you want. It must be the higher zIndex number.
				}
			}
		});
	});
</script>

$('#sidebar').simpleSidebar({
	opener: '#button',
	wrapper: '#wrapper',
	sidebar: {
		align: 'left',
		width: 300,
		closingLinks: '.close-sidebar'
		css: {
			zIndex: 3000
		}
	}
});

$.fn.simpleSidebar.settings.sidebar.align = 'left';
$.fn.simpleSidebar.settings.sidebar.width = 300;
$.fn.simpleSidebar.settings.sidebar.closingLinks = '.close-sidebar';
$.fn.simpleSidebar.settings.css.zIndex = 3000;

$('#sidebar').simpleSidebar({
	opener: '#toggle-sidebar',
	wrapper: '#wrapper'
});

$.fn.simpleSidebar.settings.mask.css = {
	backgroundColor: 'black',
	opacity: 0.5,
	filter: 'Alpha(opacity=50)'
};

• Tag
• jQuery
• Navigation
• Responsive