1、创建一个带侧边栏的项目
ionic start myApp sidemenu
2、创建成功后，在ponent.html页面查看相应代码
<!--menuId: 菜单栏的唯一标识side: 显示的位置，start为左边，end为右边；type: 菜单栏显示隐藏的效果；<ion-title>：菜单栏打开后的title信息<ion-menu-toggle>：菜单栏点击后可隐藏--><ion-menu menuId="first" side="start" type="overlay"><ion-header><ion-toolbar color="success"><ion-title>用户信息</ion-title></ion-toolbar></ion-header><ion-content><ion-list><ion-menu-toggle><ion-item [routerDirection]="'root'" [routerLink]="['/news']"><ion-label>我的新闻</ion-label></ion-item></ion-menu-toggle><ion-menu-toggle><ion-item [routerLink]="['/product']"><ion-label>我的商品</ion-label></ion-item></ion-menu-toggle></ion-list></ion-content></ion-menu><!--main 属性不可少--><ion-router-outlet main></ion-router-outlet>
3、进入菜单栏页面的按钮代码
<ion-buttons slot="start"><!--菜单栏按钮，点击该按钮显示菜单栏页面<ion-menu-button>菜单栏按钮入口menu="first" first的名称必须和菜单栏<ion-menu>组件的menuId相同--><ion-menu-button menu="first"></ion-menu-button></ion-buttons>
4、使用JS控制菜单栏
1、 给 ion-menu 定义 menuId 属性<ion-menu side="start" menuId="first"></ion-menu>2、 控制菜单的页面中引入下面代码：import { MenuController } from '@ionic/angular';3、 初始化构造函数constructor(private menu: MenuController) { }4、 对应方法中通过 js 控制侧边栏doOPenMenu() {this.menu.open('first');}
