mui 侧滑菜单

 

结构模板

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

主容器 <div class="mui-off-canvas-wrap mui-draggable"></div>

菜单窗体 <aside class="mui-off-canvas-right"></aside>

主窗体 <div class="mui-content mui-scroll-wrapper"></div>

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

 

示例1：单页面侧滑（未加载子页面，实现点击页面图标，显示不同侧滑菜单内容）

<!-- 侧滑菜单mOffcanvas -->
		<!-- 主界面不动、菜单移动 -->
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!-- 菜单容器 -->
			<!-- Home -->
			<aside class="mui-off-canvas-left" id="offCanvasSide1" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						Home
					</div>
				</div>
			</aside>
			<!-- Email -->
			<aside class="mui-off-canvas-left" id="offCanvasSide2" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						Email
					</div>
				</div>
			</aside>
			<!-- Chat -->
			<aside class="mui-off-canvas-left" id="offCanvasSide3" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						Chat
					</div>
				</div>
			</aside>
			<!-- Location -->
			<aside class="mui-off-canvas-left" id="offCanvasSide4" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						Location
					</div>
				</div>
			</aside>
			<!-- Search -->
			<aside class="mui-off-canvas-left" id="offCanvasSide5" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						Search
					</div>
				</div>
			</aside>
			<!-- Phone -->
			<aside class="mui-off-canvas-left" id="offCanvasSide6" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						Phone
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide1"></a>
					<h1 class="mui-title">单页侧滑菜单</h1>
				</header>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item mui-active">
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">首页</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-phone"></span>
						<span class="mui-tab-label">电话</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-email"></span>
						<span class="mui-tab-label">邮件</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-gear"></span>
						<span class="mui-tab-label">设置</span>
					</a>
				</nav>
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<!-- 九宫格mGrid -->
						<ul class="mui-table-view mui-grid-view mui-grid-9">
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide1">
							        <span class="mui-icon mui-icon-home"></span>
							        <div class="mui-media-body">Home</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide2">
							        <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
							        <div class="mui-media-body">Email</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide3">
							        <span class="mui-icon mui-icon-chatbubble"></span>
							        <div class="mui-media-body">Chat</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide4">
							        <span class="mui-icon mui-icon-location"></span>
							        <div class="mui-media-body">Location</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide5">
							        <span class="mui-icon mui-icon-search"></span>
							        <div class="mui-media-body">Search</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide6">
							        <span class="mui-icon mui-icon-phone"></span>
							        <div class="mui-media-body">Phone</div>
							    </a>
							</li>
						</ul>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>　

动画效果

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

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

QQ式移动 mui-scalable

示例2：自定义侧滑（加载子页面，实现侧滑菜单）

index.html

显示主界面内容，侧滑菜单通过 preload页面预加载 方式导入

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>侧滑菜单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/index.css" rel="stylesheet" />
	</head>

	<body>		
		<!-- mHeader头部 -->
		<header class="mui-bar mui-bar-nav">
	    	<span class="mui-icon mui-icon-search"></span>
	      	<a class="mui-action-menu mui-icon mui-icon-plusempty mui-pull-right"></a>
	      	<h1 class="mui-title">定位</h1>
	   	</header>
	   
	   	<!-- mTab底部选项卡 -->
	   	<nav class="mui-bar mui-bar-tab">
	   	    <a class="mui-tab-item mui-active">
	   	        <span class="mui-icon mui-icon-home"></span>
	   	        <span class="mui-tab-label">首页</span>
	   	    </a>
	   	    <a class="mui-tab-item">
	   	        <span class="mui-icon mui-icon-phone"></span>
	   	        <span class="mui-tab-label">电话</span>
	   	    </a>
	   	    <a class="mui-tab-item">
	   	        <span class="mui-icon mui-icon-email"></span>
	   	        <span class="mui-tab-label">邮件</span>
	   	    </a>
	   	    <a class="mui-tab-item">
	   	        <span class="mui-icon mui-icon-gear"></span>
	   	        <span class="mui-tab-label">设置</span>
	   	    </a>
	   	</nav>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			// 创建遮罩层
			var main = mui.createMask(_closeMenu);
			var menu = mui.createMask(_closeMenu);
			var mask = mui.createMask(_closeMenu);
			
			var showMenu = false;
			
			// 页面初始化,引入子页面,可以传入多个子页面,一个子页面就是一个对象
			mui.init({
				// 取消右滑关闭功能
				swipeBack: false,
				// beforeback参数对应的函数若返回false，则不再执行mui.back()方法
				beforeBack: back,
				// 子页面配置
				subpages:[]
			});
			
			// 通过back方法,判断mui.back()是否执行
			function back() {
				if (showMenu) {
					// 菜单处于显示状态,返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑
					closeMenu();
					return false;
				} else {
					// 菜单处于隐藏状态,执行返回时,要先close菜单页面,然后继续执行mui.back逻辑关闭主窗口
					menu.close('none');
					return true;
				}
			}
			
			mui.plusReady(function(){	
				// 强制竖屏
				plus.screen.lockOrientation("portrait-primary");
				// 当前webViewObject对象
				main = plus.webview.currentWebview();
				// 自动创建menu窗口
				// setTimeout的目的是等待窗口动画结束后,再执行create webview操作,避免资源竞争,导致窗口动画不流畅
				setTimeout(function(){
					// menu页面预加载
					menu = mui.preload({
						url: 'index-menu.html',
						id: 'index-menu.html',
						styles: {
							left: '30%',
							 '70%',
							zindex: 999
						}
					});
				},300);
			});
			
			/**
			 * 显示侧滑菜单
			 */
			function openMenu (num) {
				if(!showMenu){
					// 解决android4.4以下版本webview移动时,导致fixed定位元素错乱的bug
					if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
						document.querySelector("header.mui-bar").style.position = "static";
						// 同时需要修改以下.mui-content的padding-top,否则会多出空白
						document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
					}
					// 侧滑菜单处于隐藏状态,则立即显示出来
					menu.show('none', 0, function(){
						menu.setStyle({
							left: '30%',
							transition: {
								duration: 150
							}
						});
					});
					// 显示主窗体遮罩
					mask.show();
					showMenu = true;
				}
			}
			
			/**
			 * 关闭侧滑菜单
			 */
			function closeMenu () {
				// 窗体移动
				_closeMenu();
				// 关闭遮罩
				mask.close();
			}
			
			/**
			 * 关闭侧滑菜单(业务部分)
			 */
			function _closeMenu () {
				if (showMenu) {
					// 解决android 4.4以下版本webview移动时,导致fixed定位元素错乱的bug
					if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
						document.querySelector("header.mui-bar").style.position = "fixed";
						// 同时需要修改以下.mui-content的padding-top，否则会多出空白
						document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "44px";
					}
					
					// 设置侧滑菜单样式
					menu.setStyle({
						left: '100%',
						transition: {
							duration: 150
						}
					});
					
					// 等窗体动画结束后,隐藏菜单webview,节省资源
					setTimeout(function(){
						menu.hide();
					}, 300);
					showMenu = false;
				}
			}
			
			// 点击侧滑侧滑图标,打开侧滑菜单
			document.querySelector('.mui-action-menu').addEventListener('tap',openMenu);
			// 在android4.4中的swipe事件,需要preventDefault一下,否则触发不正常,故,在dragleft,dragright中preventDefault
			window.addEventListener('dragright', function(e){
				e.detail.gesture.preventDefault();
			});
			window.addEventListener('dragleft', function(e){
				e.detail.gesture.preventDefault();
			});
			
			// 主界面向左滑动,若菜单未显示,则显示菜单,否则不做任何操作
			window.addEventListener("swipeleft", openMenu);
			// 主界面向右滑动,若菜单已显示,则关闭菜单,否则不做任何操作
			window.addEventListener("swiperight", closeMenu);
			
			// menu页面向右滑动,关闭菜单
			window.addEventListener("menu:swiperight", closeMenu);
			
			// 重写mui.menu方法,android版本menu按键按下可自动打开、关闭侧滑菜单
			mui.menu = function(){
				if (showMenu) {
					closeMenu();
				} else {
					openMenu();
				}
			}
		</script>
	</body>

</html>

index-menu.html

侧滑菜单页面

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>侧滑菜单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/indexMenu.css" rel="stylesheet"  />
	</head>

	<body>
		<!--mBody主体-->
		<div class="mui-content">
		    <!--侧滑菜单内容-->
		    <ul class="mui-table-view">
	            <li class="mui-table-view-cell">
	                <a class="mui-navigate-right">
	                    Item 1
	                </a>
	            </li>
	            <li class="mui-table-view-cell">
	                <a class="mui-navigate-right">
	                     Item 2
	                </a>
	            </li>
	            <li class="mui-table-view-cell">
	                <a class="mui-navigate-right">
	                     Item 3
	                </a>
	            </li>
	        </ul>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			// 关闭back、menu按键监听,这样侧滑主界面会自动获得back和menu的按键事件,仅在主界面处理按键逻辑即可
			mui.init({
				keyEventBind: {
					backbutton: false,
					menubutton: false
				}
			});
			// 定义main用于指向当前webveiewObject
			var main = null;
			mui.plusReady(function(){
				// 获取当前Webview窗口的创建者
				main = plus.webview.currentWebview().opener();
			});
			
			// 关闭菜单
			function closeMenu () {
				// mui.fire触发自定义事件
				mui.fire(main,"menu:swiperight");
			}
			
			// 左滑显示出来的菜单,只需监听右滑,然后将菜单关闭即可。在该菜单上左滑,不做任何操作
			window.addEventListener("swiperight",closeMenu);
		</script>
	</body>

</html>

.