一． 側邊欄菜單 : ion-side-menus
側邊欄菜單是一個最多包含三個子容器的元素：
默認情況下，側邊欄菜單將只顯示ion-side-menu-content容器的內容。
向左滑動時，將顯示右邊欄ion-side-menu容器的內容，向右滑動時，將顯示左邊欄 ion-side-menu容器的內容。
在ionic中，使用ion-side-menus指令定義側邊欄菜單：
<ion-side-menus> <!-- 中間內容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- 左側菜單 --> <ion-side-menu side="left"> </ion-side-menu> <!-- 右側菜單 --> <ion-side-menu side="right"> </ion-side-menu> </ion-side-menus>
<!--切換左側欄顯示狀態--> <any menu-toggle="left"></any> <!--切換右側欄顯示狀態--> <any menu-toggle="right"></any>
menu-close指令用來給元素增加關閉側欄內容的功能：
<any menu-close=""></any>
與menu-toggle指令不同，menu-close不需要指定要關閉的側欄是哪一邊，它直接將當前打開的側欄關閉。
<!DOCTYPE html>
<html ng-app="ionic">
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script src="../../lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<a menu-toggle="left" class="button icon ion-navicon"></a>
<h1 class="title">ion-side-menu-content</h1>
</ion-header-bar>
<ion-content class="positive-bg">
<a menu-close="" class="button icon ion-navicon"></a>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left" width="150">
<ion-content class="balanced-bg">
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
三． ion-side-menu-content 屬性設置
使用指令ion-side-menu-content聲明側邊欄菜單的主顯示區域容器：
<ion-side-menu-content>...</ion-side-menu-content>
ion-side-menu-content指令有以下可選屬性：
- drag-content - 是否允許拖動內容打開側欄菜單，默認為true。
允許值：true | false。當設置為false時，將禁止通過拖動內容打開側欄菜單。
- edge-drag-threshold - 是否啟用邊距檢測。默認為false。
允許值：number | true | false。
如果設置為一個正數，那么只有當拖動發生在距離邊界小於這個數值的情況下，才觸發側欄顯示。
當設置為true時，使用默認的25px作為邊距閾值。
如果設置為false或0，則意味着禁止邊距檢測，可以在內容區域的任何地方 拖動來打開側欄。
四.側邊欄區域容器 : ion-side-menu 屬性
使用指令ion-side-menu聲明側邊欄區域容器：
<ion-side-menu>...</ion-side-menu>
ion-side-menu指令有以下屬性：
- side - 位於內容區的左邊或右邊。side屬性是必須的。允許值：left | right。默認值為left。
- width - 側邊欄的寬度 width屬性是可選的，表示以像素為單位的側欄菜單寬度。默認為275px。
- is-enabled - 是否可用。is-enabled屬性是可選的，聲明該側邊欄是否可用，允許值為：true | false ，默認為true。 當側邊欄不可用時，拖拽內容或使用切換按鈕都無法打開側欄菜單。
- expose-aside-when - 側邊欄自動顯示條件表達式。默認情況下，側邊欄是隱藏的，需要用戶向左或向右拖動內容，或者通過一個切換按鈕來打開。 但是在有些場景下（比如，橫放的平板）屏幕寬度足夠大，這時，自動地顯示側邊欄內容會更合理。 expose-aside-when屬性就是處理這種情況的，和CSS3的@meida類似，expose-aside-when需要 一個CSS表達式，例如：expose-aside-when="(min-width:500px)"，這意味着當屏幕寬度大於 500px時將自動顯示側欄菜單。 ionic為expose-aside-when提供了一個快捷選項：large ， 這等同於 (min-width:768px)。
<!DOCTYPE html>
<html ng-app="ionic">
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script src="../../lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body>
<ion-side-menus>
<ion-side-menu-content drag-content="true" edge-drag-threshold=50>
<ion-header-bar class="bar-positive">
<a menu-toggle="left" class="button icon ion-navicon"></a>
<h1 class="title">ion-side-menu-content</h1>
</ion-header-bar>
<ion-content>
<p>this is main area of side-menus</p>
</ion-content>
<div class="marker energized-bg"></div>
</ion-side-menu-content>
<ion-side-menu side="left" width="150" expose-aside-when="(min-width:500px)">
<ion-content class="balanced-bg">
</ion-content>
</ion-side-menu> </ion-side-menus>
</body>
</html>
五． 腳本中控制側邊欄菜單接口 : $ionicSideMenuDelegate
- toggleLeft([isOpen]) - 是否打開左側欄菜單，參數isOpen是可選的，默認為true ，表示打開左側欄菜單。
- toggleRight([isOpen]) - 是否打開右側欄菜單，參數isOpen是可選的，默認為true ，表示打開右側欄菜單。
- getOpenRatio() - 側欄菜單打開的寬度占其總寬度比例。例如，一個100px寬的側欄菜單，如果打開50px，那么其比例為50%，getOpenRatio()將返回0.5 。
- isOpen() - 當前側欄菜單是否打開。不管是左側欄菜單，還是右側欄菜單，只要處於打開狀態，isOpen()都返回true。
- isOpenLeft() - 左側欄菜單是否打開。當左側欄菜單處於打開狀態時，isOpenLeft()返回true。
- isOpenRight() - 右側欄菜單是否打開。當右側欄菜單處於打開狀態時，isOpenRight()返回true。
- canDragContent([canDrag]) - 是否允許拖拽內容以打開側欄菜單。canDrag參數是可選的，如果canDrag為true，表示允許通過拖拽內容打開側欄菜單。
- edgeDragThreshold(value) - 設置邊框距離閾值。當參數value為false或0時，意味着在內容區域任何位置進行拖拽都可以打開側欄菜單。 如果參數value為一個數值，意味着只有當拖拽發生的位置距邊框不大於此數值時，才能打開 側欄菜單。 參數value為true等同於將value設置為25。
-
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src="../../lib/js/ionic.bundle.min.js"></script> <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css"> <script> angular.module("myApp",["ionic"]) .controller("myCtrl",function($scope,$ionicSideMenuDelegate){ $scope.toggle = function(){ $ionicSideMenuDelegate.toggleLeft(); }; }); </script> </head> <body ng-controller="myCtrl"> <ion-side-menus> <ion-side-menu-content> <ion-header-bar class="bar-positive"> <a class="button" ng-click="toggle();">切換</a> <h1 class="title">ion-side-menu-content</h1> </ion-header-bar> <ion-content class="calm-bg"> </ion-content> </ion-side-menu-content> <ion-side-menu side="left" width="120"> <ion-content class="balanced-bg"> </ion-content> </ion-side-menu> <ion-side-menu side="right" width="120" > <ion-content class="energized-bg"> </ion-content> </ion-side-menu> </ion-side-menus> </body> </html>六． 腳本ion-tap結合 ion-side-menus一起使用：記住要將ion-tap標簽置於ion-side-menu-content標簽內。