??Side Menu作為內容左側的導航菜單，對于內容很多的app來說很有用，可以通過滑動出現Side Menu，向右滑動出現Side Menu，向左滑動隱藏Side Menu。 ??Side Menu作為AF UI的一部分，并沒有包含在appframework.ui.min.js中，因此為了使用?Side Menu必須包含相關插件的js。 除了基礎的appframework.js，appframework.ui.min.js還需要如下js： ~~~ <script type="text/javascript"> if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) { var script = document.createElement("script"); script.src = "plugins/af.desktopBrowsers.js"; var tag = $("head").append(script);//為了在桌面瀏覽器中測試，添加此段腳本，在智能設備中可以去掉 } </script> <script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script> <script type="text/javascript" charset="utf-8" src="./plugins/af.passwordBox.js"></script> <script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script> <script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script> <script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script> <script type="text/javascript" charset="utf-8" src="./plugins/af.popup.js"></script> <script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script> <script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script> <script type="text/javascript" charset="utf-8" src="./ui/transitions/pop.js"></script> <script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script> <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script> <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script> <script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script> ~~~ ? 定義Side Menu 其實就是定義一個**nav標簽。** 位置在div id="afui">內部，<div id="content">同級，但在<div id="content">,<div id="navbar" >之下。 官方文檔上說： To enable a side menu in your app, add <nav> objects to the DOM and set id attributes. These should be declared at the bottom of your HTML, below the #content and #navbar div elements. 但我發現沒有#navbar div好像也可以使用。 例如： ~~~ <nav id="main"> <div class='title'>左側導航</div> <ul> <li ><a class="icon home mini" href="#main">首頁</a></li> </ul> <ul> <li ><a class="icon home mini" href="#about">關于我們</a></li> </ul> </nav> ~~~ 可以定義多個，以便于給不同的panel設置不同的Side Menu 例如： ~~~ <-- first side menu is the default --> <nav id="main"> Default side menu </nav> <nav id="second"> Second menu </nav> ~~~ 給panel設置Side Menu，是通過屬性data-nav 例如： ~~~ <div class="panel" data-nav="main" title="Test"> </div> <div class="panel" data-nav="second" title="Test 2"> </div> ~~~ [官方文檔參考](http://app-framework-software.intel.com/documentation.php#afui/afui_side) ** ** ? ?