ionic 側欄菜單用法

第一步：
引入js和css文件我這裏是直接引入的cdn，ionic是基於angular的，bundle.min.js把經常使用angular的js已經壓縮到一塊兒，能夠直接引入.bundle.min.js，不須要引入其餘js文件。

<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>

第二步：創建一個app，由於ionic是基於angular封裝的，要使用他的事件和一些動態樣式，須要創建angular的app同時注入ionic，

<script type="text/javascript">
		angular.module("app", ['ionic']);
	</script>

第三步：使用
要使用側欄菜單，添加一個父元素<ion-side-menus>，一箇中間內容 <ion-side-menu-content>，和一個或更多 <ion-side-menu> 指令。

屬性：drag-content="true"：是否被拖動
      menu-toggle="right" ：切換到右側菜單
<ion-side-menu side="left" width="350">
<ion-content class="balanced-bg">
左側測試
</ion-content>
</ion-side-menu>
設置左側或者右側菜單，width="350"爲菜單寬度

<!--父級元素-->
		<ion-side-menus drag-content="true">
			<ion-side-menu-content>
				<ion-header-bar style="background-color: #31c27c;height: 50px;">
					<div class="row">
						<a menu-toggle="right" class="icon ion-navicon-round col-20" style="color: white;font-size: 38px;margin-top: -3px;"></a>
						<a menu-toggle="left" class="col-30" style="color: #FFFFFF;font-size: 25px;font-weight: bolder;line-height: 25px;">個人</a>
						<a menu-toggle="left" class="col-30" style="color: #FFFFFF;font-size: 38px;line-height: 25px;word-spacing:60px;">音樂館</a>
					</div>
				</ion-header-bar>
			</ion-side-menu-content>
			<ion-side-menu side="left" width="350">
				<ion-content class="balanced-bg">
					左側測試
				</ion-content>
			</ion-side-menu>
			<ion-side-menu side="right" width="350">
				<ion-content class="balanced-bg">
					右側測試
				</ion-content>
			</ion-side-menu>
		</ion-side-menus>