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键
。
关闭侧滑菜单
侧滑列表示例本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！