mmenu advanced menu

by ian_smithz

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/FrDH/jQuery.mmenu/master/dist/css/jquery.mmenu.all.css">
<script src="https://cdn.rawgit.com/FrDH/jQuery.mmenu/master/dist/js/jquery.mmenu.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/FrDH/jQuery.mmenu/master/demo/css/demo.css">
<div id="page">
			<div class="header">
				<a href="#menu"></a>
				Demo
			</div>
			<div class="content">
				<p><strong>This is an advanced demo.</strong><br />
					Click the menu icon to open the menu.</p>
				<p>For more demos, a tutorial, documentation and support, please visit <a href="http://mmenu.frebsite.nl" target="_blank">mmenu.frebsite.nl</a></p>			
			</div>
			<nav id="menu">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#about">About us</a>
						<ul>
							<li><a href="#about/history">History</a></li>
							<li><a href="#about/team">The team</a>
								<ul>
									<li><a href="#about/team/management">Management</a></li>
									<li><a href="#about/team/sales">Sales</a></li>
									<li><a href="#about/team/development">Development</a></li>
								</ul>
							</li>
							<li><a href="#about/address">Our address</a></li>
						</ul>
					</li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</nav>
		</div>

JavaScript

$(function() {
				$('nav#menu').mmenu({
					extensions	: [ 'effect-slide-menu', 'pageshadow' ],
					searchfield	: true,
					counters	: true,
					navbar 		: {
						title		: 'Advanced menu'
					},
					navbars		: [
						 {
							position	: 'top',
              height: 2,
							content		: [
								'<ul class="mm-listview">'+
								'<li>'+
								'		<input id="toggleA" class="mm-toggle" checked="checked" type="checkbox">'+
								'		<label for="toggleA" class="mm-toggle"></label>'+
								'		<a href="#">A toggle</a>'+
								'</li>'+
								'<li>'+
								'		<input id="toggleB" class="mm-toggle" checked="checked" type="checkbox">'+
								'		<label for="toggleB" class="mm-toggle"></label>'+
								'		<a href="#">B toggle</a>'+
								'</li>'+
								'</ul>'
							]
						},
						{
							position	: 'top',
							content		: [ 'searchfield' ]
						}
						, 
						{
							position	: 'top',
							content		: [
								'prev',
								'title',
								'close'
							]
						}
					]
				},
				{
					// configuration
					classNames: {
					   selected: "active"
					}
				}
				);
			});