jquery.mmenu.js手机侧边导航jquery插件

jquery.mmenu.js手机侧边导航jquery插件

创建一个,使用jQuery或off-canvas应用极为相像的菜单。 mmenu插件真的很容易。 首先,创建一个网页像通常所做的那样,上传到网络服务器。 如果你没有一个,我建议 字节 。 接下来,遵循这一基本教程中的步骤。 如果你不喜欢阅读, 这里有一个视频

首先要引进插件的css和jquery

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

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" 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>这是一个演示。</strong><br />点击菜单图标打开菜单。</p>
</div>

<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="https://www.baidu.com/">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>

jQuery

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

官网有非常详细的教程,建议大家去官网看一下详细说明!
github:https://github.com/BeSite/jQuery.mmenu

作者:WELKOM,荷兰人(从官网看到的名字,也不知道是否正确)
版本:5.1.2
官方网站: http://mmenu.frebsite.nl/??
作者的网站: http://www.frebsite.nl/这哥们写了好多好东西,建议有机会看看吧,特别牛叉的一个人!
官方DEMO下载:http://mmenu.frebsite.nl/download.php
官方DEMO本站查看: http://www.ijquery.cn/demo/mmenu
????