html侧滑菜单代码,MUI - 侧滑菜单(示例代码)

各大APP必备的侧滑菜单栏,支持手势滑动。包含QQ式、美团式等

结构模板

这里是示例Html, 必须使用Mui框架才能使用。

主容器

菜单窗体

主窗体

左菜单 mui-off-canvas-left 右菜单 mui-off-canvas-right

关闭侧滑菜单

显示侧滑菜单

侧滑核心js代码

动画效果

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

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

QQ式移动 mui-scalable

({

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】 即可

{

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键。

关闭侧滑菜单

侧滑列表示例

• Item1

• Item2

• Item3

• Item4

• Item5

• Item6