html侧滑菜单mui,MUI - 侧滑菜单

动画效果

主界面移动，菜单不动 默认

菜单移动，主界面不动 mui-slide-in

QQ式移动 mui-scalable

侧滑核心js代码

mui.init

({

swipeBack: false,

});

var Main = mui('#Main');//侧滑容器父节点

Main[0].classList.add('mui-scalable');//动画效果的类

Main.offCanvas().refresh();//绑定动画效果

document.getElementById('offCanvasShow').addEventListener('tap',function()

{

Main.offCanvas('show');

});

document.getElementById('offCanvasHide').addEventListener('tap',function()

{

Main.offCanvas('close');

});

//支持区域滚动，需要添加.mui-scroll-wrapper

mui('#offCanvasSideScroll').scroll();

mui('#offCanvasContentScroll').scroll();

//实现ios平台的侧滑关闭页面；

if (mui.os.plus && mui.os.ios)

{

Main[0].addEventListener('shown',

function(e) { //菜单显示完成事件

plus.webview.currentWebview().setStyle

({

'popGesture': 'none'

});

});

Main[0].addEventListener('hidden',

function(e)

{ //菜单关闭完成事件

plus.webview.currentWebview().setStyle

({

'popGesture': 'close'

});

});

}

以上已经实现了基本的功能。下面是对侧滑菜单进行基本美化

菜单美化

只需要覆盖原有的【asign】 即可

html,body

{

background-color: #efeff4;

}

p {

text-indent: 22px;

}

span.mui-icon {

font-size: 14px;

color: #007aff;

margin-left: -15px;

padding-right: 10px;

}

.mui-off-canvas-left {

color: #fff;

}

.title {

margin: 35px 15px 10px;

}

.title+.content {

margin: 10px 15px 35px;

color: #bbb;

text-indent: 1em;

font-size: 14px;

line-height: 24px;

}

input {

color: #000;

}

侧滑导航

这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮

；4.Android手机按back键；5.Android手机按menu键

。

关闭侧滑菜单

侧滑列表示例

• Item 1

• Item 2

• Item 3

• Item 4

• Item 5

• Item 6