MUI侧滑菜单使用案例

"); </div> 现在很多app都会使用侧滑菜单进行更多功能的定制。侧滑菜单里面的内容一般为个人中心的内容，比如QQ，当然还有其他强势的app不用，比如微信，知乎...。好啦好啦，我知道我废话多，但是平时我一般不说话，现在就不能让我多BB几句嘛！
下面进行构建一个简单的侧滑菜单demo进行侧滑菜单的demo学习。

创建一个名为 CeHuaApp 的移动app 具体细节不多说



先按照一个开发app的思路来建设

创建首页index.html（首页） menu.html（菜单页面） s1.html s2.html s3.html (三个子页面)页面进行页面绘制
index.html

构建一个标题栏和下方切换菜单

1. <header class="mui-bar mui-bar-nav"> 
2.         <span id="showBtn" class="mui-icon mui-icon-bars"></span> 
3.         <h1 id="title" class="mui-title">1</h1> 
4.     </header> 
5.     <div class="mui-content"> 
6.         <nav class="mui-bar mui-bar-tab"> 
7.             <a class="mui-tab-item mui-active" href="s1.html"> 
8.                 <span class="mui-icon mui-icon-home"></span> 
9.                 <span class="mui-tab-label">1</span> 
10.             </a> 
11.             <a class="mui-tab-item" href="s2.html"> 
12.                 <span class="mui-icon mui-icon-phone"></span> 
13.                 <span class="mui-tab-label">2</span> 
14.             </a> 
15.             <a class="mui-tab-item" href="s3.html"> 
16.                 <span class="mui-icon mui-icon-email"></span> 
17.                 <span class="mui-tab-label">3</span> 
18.             </a> 
19.         </nav> 
20.     </div> 

然后就是滑出的菜单页面menu.html
就是添加一个按钮 处理菜单关闭事件的

1. <div class="mui-content"> 
2.         <button id="closeBtn" type="button" class="mui-btn mui-btn-blue mui-btn-block">关闭侧滑</button> 
3.     </div> 

接下来几个子页面 s1.html s2.html s3.html
几个都一样 识别一下而已

1. <div class="mui-content"> 
2.         <p>第一个页面</p> 
3.     </div> 

再看js处理 首先看index.html

1. <script src="../js/mui.min.js"></script> 
2.     <script type="text/javascript"> 
3.         var menu = null; 
4.         var main = null; 
5.         var showMenu = false; 
6.  
7.         mui.init(); 
8.  
9.         var subpages = ['s1.html'<