28 2 月, 2015

最近在做一个页面，用到一个插件适用于网站目录导航，所以把它分享出来。

jQuery.mmenu 实现了类似手机上经常使用的抽屉式菜单，如下图所示：

下面是使用教程：

首先是引用文件

<link type="text/css" rel="stylesheet" href="../src/css/jquery.mmenu.all.css" />

<script type="text/javascript" src="../src/js/jquery-1.8.2/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../src/js/jquery.mmenu.min.all.js"></script>

然后创建html

<div id="page">
			<div class="header">
				<a href="#menu"></a>
				Demo
			</div>
			<div class="content">
				<p><strong>This is a 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>

最后绑定脚本事件：

<script type="text/javascript">
			$(function() {
				$('nav#menu').mmenu();
			});
		</script>

脚本事件可以写一些其他的，在官方有，可以去看。

支持功能：

1、基本的滑动：支持左 上 右方向的抽出

2.支持查询

3.支持在每个菜单上显示个数。

下面分享官方地址：http://mmenu.frebsite.nl/

下载地址：http://mmenu.frebsite.nl/download.html