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>

转载于:https://www.cnblogs.com/baryon/p/9611376.html