jQuery.mmenu是一款高仿真移动手机滑动侧边栏效果的jQuery插件。该jQuery插件能够制作出和手机应用程序效果完全相同的隐藏滑动侧边栏和多级菜单效果。它的特点有：
滑动侧边栏可以放置在页面的上下左右四个位置。
可以作为水平滑动菜单或垂直下拉菜单使用。
整个布局包括完整的搜索框，页面头部，脚部和内容区域。
适合移动触摸设备使用。
可以很容易的通过CSS文件来自定义样式。
可以在现代浏览器和移动手机设备中正常运行。
使用方法
使用这个滑动侧边栏布局插件首先要引入jQuery、jquery.mmenu.js和jquery.mmenu.css文件。
HTML结构
这个滑动侧边栏布局的基本HTML结构如下：
Mmune
This a mmenu
how to use the jQuery.mmenu-plugin.
- The page
- The mainmenu
- Submenus
- Labels
- Counters
- Selected item
- Open the menu
- Close the menu
调用插件
在页面加载完毕之后，使用下面的方法来调用插件：
$(document).ready(function() {
$("#page").mmenu({
// options
}, {
// configuration
});
});参数(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
在一个
元素上使用这个class名称，该元素会被显示为一个分割条
classNames{panel}
"Panel"
String
使用该class名称的元素会被显示为一个Panel
classNames{selected}
"Selected"
String
在一个
元素上使用这个class名称，该元素会显示为已选择状态
classNames{vertical}
"Vertical"
String
在子菜单上使用这个class名称，它将会显示在父菜单的下面而不是从右边滑出
clone
false
Boolean
是否复制菜单
openingInterval
25
Number
打开和关闭菜单和面板的时间，单位毫秒
panelNodetype
"div, ul, ol"
String
容器的节点类型jQuery选择器
transitionDuration
400
Number
CSS过渡效果的持续时间，单位毫秒
方法
$(document).ready(function() {
$("#my-menu").mmenu({
// options
});
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") );
});
方法名称
描述
closeAllPanels
关闭所有的面板，回到第一个面板
closePanel
关闭一个面板，只有在slidingSubmenus参数设置为false时可用
getInstance
获取菜单对象的实例
init
使用该方法初始化一个新的菜单面板
openPanel
打开一个面板
setSelected
set or unset a list item as "selected".
update
更新菜单
