html5 侧边滑动,jQuery高仿真移动手机滑动侧边栏布局插件

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

更新菜单