本篇博文是继续MUI（1）博文。
　　上一篇博文小编写了两个页面，一个页面只写了一个头部导航栏，另一个页面写了一个按钮，然后这两个页面进行合并显示，即在头部导航栏页面加载显示另一个页面的按钮。仔细观察上一篇的最后截图效果会发现，在头部导航栏的左上角有一个侧滑图标，本篇博文就是实现一个侧滑菜单效果。
　　还是继续上一篇博文中应用到的项目，只是在之前项目的基础之上新建了一个页面，index_menu.html页面。
index.html页面源代码如下：

首页 mui.init({ 22 subpages: [{ styles: { } 29 }] 30 }); , , ; () { plus.webview.currentWebview(); , closeMenu); () { mui.preload({ , , 43 styles: { , , }, 48 show: { } 51 }); ); 53 }); ; openMenu() { 57 if(isInTransition) { 58 return; 59 } showMenu) { ; 63 menu.setStyle({ }); () { main.setStyle({ , } 75 }); () { ; 78 menu.setStyle({ }); ); ; 84 }); 85 } 86 } closeMenu() { 89 if(isInTransition) { 90 return; 91 } 92 if(showMenu) { ; 96 main.setStyle({ , , 99 transition: { } 102 }); ; () { ; 107 menu.hide(); ); 109 } 110 } (e) { 113 if(showMenu) { 114 closeMenu(); { 116 openMenu(); 117 } 118 }); , openMenu); , closeMenu); , closeMenu); , openMenu); () { 128 if(showMenu) { 129 closeMenu(); { 131 openMenu(); 132 } 133 } mui.back; () { 137 if(showMenu) { 138 closeMenu(); { 140 _back(); 141 } 142 }

上面的代码第35行的作用是实现仅仅支持竖屏显示，但是小编屏蔽了这一行代码，经过测试Android4.2.2系统版本支持横屏显示和竖屏显示，但是Android4.4.2不支持横屏显示，其他机型情况尚未测试，实际效果尚不明确。
关于mui.plusReady方法官方文档中这样说明：（官方文档地址：）

关于plus.webview.currentWebview官方文档中这样说明：（官方文档地址：）

关于mui.preload官方文档中这样说明：（官方文档地址：）

遮罩蒙版官方文档中这样说明：（官方文档地址：）

由于ios系统没有和Android手机一样的菜单和返回按键所以要特别注意这一点。

index_menu.html页面源代码如下：

body, 侧滑导航这个页面是侧滑导航页面，是单独的一个页面，作为侧滑页面出现。关闭这个侧滑菜单的方式：1.点击这个侧滑菜单页面之外的任意位置；2.点击下面这个红色按钮；3.Android手机按back键;4.Android手机按menu键。 关闭侧滑菜单; mui.os.android) { ); 47 if(span) { ; 49 } } close() { ); 55 } , close); (e) { e.detail.direction; 62 }); (e) { mui.isScrolling) { 65 e.detail.gesture.preventDefault(); 66 } 67 }); (e) { ) { 71 close(); 72 } 73 });