MUI的側滑菜單動畫做得很不錯，其中分為兩種，一種是以webview，另一種是DIV形式

webview模式

主頁面和菜單內(nèi)容在不同的webview中，兩個頁面根據(jù)內(nèi)容需求分別組織DOM結構，mui對其DOM結構無特殊要求，故其有如下優(yōu)點：

菜單內(nèi)容是單獨的webview，故可被多個頁面復用；菜單內(nèi)容在單獨的webview中，菜單區(qū)域的滾動不影響主界面，故可使用原生滾動，滾動更為流暢；

另一方面，webview模式也有其缺點：

不支持拖動手勢（跟手拖動）；主頁面、菜單不同webview實現(xiàn)，因此若需交互（如：點擊菜單觸發(fā)主頁面內(nèi)容變化），需使用自定義事件實現(xiàn)跨webview通訊；div模式

主頁面和菜單內(nèi)容在同一個webview下，嵌套在特定結構的div中，通過div的移動動畫模擬菜單移動；故該模式有如下優(yōu)點：

支持拖動手勢（跟手拖動）；主頁面、菜單在一個頁面中，可通過JS輕松實現(xiàn)兩者交互（如：點擊菜單觸發(fā)主頁面內(nèi)容變化），沒有跨webview通訊的煩惱；

另一方面，div模式也有其缺點：

不支持菜單內(nèi)容在多頁面的復用，需每個頁面都生成對應的菜單節(jié)點；主界面和菜單內(nèi)容的滾動互不影響，因此會使用div區(qū)域滾動，在低端Android手機且滾動內(nèi)容較多時，可能會稍顯卡頓；
個人傾向于使用DIV模式，因為菜單跟頁面之間的交互是很頻繁的，而且對于移動APP來說。支持拖動手勢才是至關重要的。
下面簡單的官方案例：

??...這里是菜單的內(nèi)容??主頁面標題??這里是主界面具體內(nèi)容

mui.init({
????swipeback:true//默認左滑返回，可以達到offCanvas.hide的目的
????
??});
??
??mui('body').on('swiperight','.mui-content',function(){//綁定右滑事件，當mui-content上發(fā)生右滑時（菜單原本是隱藏狀//態(tài)的）
?mui('.mui-off-canvas-wrap').offCanvas('show');??//顯示側欄	
??});
??//關于側滑欄的動畫有N種，這里是主界面不懂，菜單欄動的效果，其他效果請到官方查看

關閉菜單還有一種方式，就是點擊菜單外面，所以為了增加這個事件需要以下代碼

mui('body').on('tap','.mui-content',function(){
?	if(mui('.mui-off-canvas-wrap').offCanvas().isShown())
?	{
?	mui('.mui-off-canvas-wrap').offCanvas().close();?
?	}
?	
?})

因為綁定的是mui-content,官方介紹中建議把頭部和底部導航之類的部分放在content外面，其他內(nèi)容放在里面，所以以上的綁定mui-content 觸摸事件可能會導致在菜單隱藏時候，都會執(zhí)行菜單隱藏代碼，為此需要加一個判斷，判斷菜單是否為顯示狀態(tài)，isShown()，否則在菜單隱藏時點擊里面的內(nèi)容會報錯，Uncaught TypeError: Cannot read property 'offsetWidth' of null