jquery.mmenu.js实现侧边导航非常适用于手机版站-最简使用教程（一）

一、插件介绍

这个插件一般做手机站用的比较多，左侧上侧右侧下侧弹出菜单。

老杨我比较笨，每次下载下来很多demo，都让我看的晕晕的，倒是看时间长了，也能看懂，不过老杨我就是觉得麻烦。总想慢慢来，从最简单的来，越简单越好。这不，最近想做一个手机站，就用到这个菜单了，先从最简单的开始，从左侧弹出菜单，先截个图吧。


     


如果不想了解它的细节，直接看 第三条内容：“最简使用教程”

二、插件作者及网址

作者：WELKOM，荷兰人（从官网看到的名字，也不知道是否正确）

版本：4.1.9

官方网站： http://mmenu.frebsite.nl/      

作者的网站： http://www.frebsite.nl/这哥们写了好多好东西，建议有机会看看吧，特别牛叉的一个人！

官方DEMO下载：http://mmenu.frebsite.nl/download.php

官方DEMO本站查看： http://www.ijquery.cn/demo/mmenu

三：最简使用教程

 



1、引用JS和CSS代码：



这里如果不用手机版就不用引用meta这一句，注：style.css是页面布局，mmenu.css是菜单的样式，font-face.css这个是最上角那个图标的样式，注意，那个图标是字体，可不是什么图片，如上图：

<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mmenu.min.js"></script>
<script type="text/javascript">
$(function() {
$('nav#menu').mmenu();
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/mmenu.css" rel="stylesheet" type="text/css">
<link href="css/font-face.css" rel="stylesheet" type="text/css">

2、HTML代码：这里不多解释了，都在代码里。

<div id="page">
<!--头部 start-->
<header>
<div class="l_tbn"><a href="#menu" class="glyphicon glyphicon-th-large"></a></div>
标题
</header>
<!--头部 end-->

<!--正文 start-->
<div class="content">正文的内容</div>
<!--正文 end-->

<!--侧边菜单 start-->
<nav id="menu">
<ul>
<li class="Selected"><a href="#">按钮1</a></li>
<li><a href="#">按钮2</a></li>
<li><a href="#">按钮3</a></li>
<li><a href="#">按钮4</a></li>
<li><a href="#">按钮5</a></li>
</ul>
</nav>
<!--侧边菜单 end-->
</div>