html侧滑菜单mui,MUI-侧滑菜单动画效果
主界⾯移动，菜单不动 默认
菜单移动，主界⾯不动 mui-slide-in
QQ式移动 mui-scalable
侧滑核⼼js代码
mui.init
({
swipeBack: false,
});
var Main = mui('#Main');//侧滑容器⽗节点
Main[0].classList.add('mui-scalable');//动画效果的类
canvas动画
Main.offCanvas().refresh();//绑定动画效果
{
Main.offCanvas('show');
});
{
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。