jQuery.mmenu是一款高仿真移动手机滑动侧边栏效果的jQuery插件。该jQuery插件能够制作出和手机应用程序效果完全相同的隐藏滑动侧边栏和多级菜单效果。它的特点有：
- 滑动侧边栏可以放置在页面的上下左右四个位置。
- 可以作为水平滑动菜单或垂直下拉菜单使用。
- 整个布局包括完整的搜索框，页面头部，脚部和内容区域。
- 适合移动触摸设备使用。
- 可以很容易的通过CSS文件来自定义样式。
- 可以在现代浏览器和移动手机设备中正常运行。
使用方法
使用这个滑动侧边栏布局插件首先要引入jQuery、jquery.mmenu.js和jquery.mmenu.css文件。
<link type="text/css" rel="stylesheet" href="mmenu.css" />
<script src="jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mmenu.js"></script>
|
HTML结构
这个滑动侧边栏布局的基本HTML结构如下：
<div id="page">
<div id="header"> <a href="#menu"></a> Mmune </div>
<div id="content">
<h4>This a mmenu</h4>
<p>how to use the jQuery.mmenu-plugin.</p>
</div>
<nav id="menu">
<ul>
<li><a href="page.html">The page</a></li>
<li><a href="mainmenu.html">The mainmenu</a></li>
<li><a href="submenus.html">Submenus</a></li>
<li><a href="labels.html">Labels</a></li>
<li><a href="counters.html">Counters</a></li>
<li><a href="selected.html">Selected item</a></li>
<li><a href="openmenu.html">Open the menu</a></li>
<li><a href="closemenu.html">Close the menu</a></li>
</ul>
</nav>
</div>
|
调用插件
在页面加载完毕之后，使用下面的方法来调用插件：
$(document).ready(function() {
$("#page").mmenu({
}, {
});
});
|
参数(options)
| 参数名称 |
默认值 |
类型 |
描述 |
| extensions |
[] |
Array |
一组使菜单可用的扩展名称，当使用配置(extensions)时需要使用该参数 |
| onClick{blockUI} |
null |
Boolean |
Whether or not to block the user interface while loading the new page |
| onClick{close} |
null |
Boolean |
是否在用户点击一个菜单链接后是否关闭菜单 |
| onClick{preventDefault} |
null |
Boolean |
是否在点击链接时阻止默认的行为 |
| onClick{setSelected} |
true |
Boolean |
是否将被点击的菜单项显示为已点击状态 |
| slidingSubmenus |
true |
Boolean |
子菜单是否从右边滑出。如果设置为false，子菜单会显示在父菜单的下面。 |
配置(configuration)
| 配置 |
默认值 |
类型 |
描述 |
| classNames{divider} |
“Divider” |
String |
在一个<li>元素上使用这个class名称，该元素会被显示为一个分割条 |
| classNames{panel} |
“Panel” |
String |
使用该class名称的元素会被显示为一个Panel |
| classNames{selected} |
“Selected” |
String |
在一个<li>元素上使用这个class名称，该元素会显示为已选择状态 |
| classNames{vertical} |
“Vertical” |
String |
在子菜单上使用这个class名称，它将会显示在父菜单的下面而不是从右边滑出 |
| clone |
false |
Boolean |
是否复制菜单 |
| openingInterval |
25 |
Number |
打开和关闭菜单和面板的时间，单位毫秒 |
| panelNodetype |
“div, ul, ol” |
String |
容器的节点类型jQuery选择器 |
| transitionDuration |
400 |
Number |
CSS过渡效果的持续时间，单位毫秒 |
方法
<script type="text/javascript">
$(document).ready(function() {
$("#my-menu").mmenu({
});
var api = $("#my-menu").data( "mmenu" );
api.bind( "openPanel", function( $panel ) {
console.log( "This panel is now opened:" + $panel.attr( "id" ) );
});
api.openPanel( $("#my-panel") );
});
</script>
|
| 方法名称 |
描述 |
| closeAllPanels |
关闭所有的面板，回到第一个面板 |
| closePanel |
关闭一个面板，只有在slidingSubmenus参数设置为false时可用 |
| getInstance |
获取菜单对象的实例 |
| init |
使用该方法初始化一个新的菜单面板 |
| openPanel |
打开一个面板 |
| setSelected |
set or unset a list item as “selected”. |
| update |
更新菜单 |
在线预览 网盘下载
郑重声明：
1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。
2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！
3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。
4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。
