Just like you can read in MenuToggle from Ionic2 docs you can do it by first creating two ion-menu
in your app.html
(or where you want to define the second menu)
<ion-menu [content]="content" side="left" id="menu1">
<ion-toolbar secondary>
<ion-title>Menu 1</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item menuClose="menu1" detail-none>
Close Menu 1
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu [content]="content" side="right" id="menu2">
<ion-toolbar danger>
<ion-title>Menu 2</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item menuClose="menu2" detail-none>
Close Menu 2
</button>
</ion-list>
</ion-content>
Please notice the side="left"
and side="right"
attributes in the ion-menu
element. We'll use that later to know which menu should be opened (the id
attribute could be also used in the same way).
Then, in your page, add to each menuToggle
which menu should be opened by assigning to it the side
attribute we defined earlier (or the id
if you prefer to do so).
<ion-header>
<ion-navbar primary>
<button menuToggle="left" start>
<ion-icon name="menu">L</ion-icon>
</button>
<button menuToggle="right" end>
<ion-icon name="menu">R</ion-icon>
</button>
<ion-title>
Multiple Menus in Ionic2
</ion-title>
</ion-navbar>
</ion-header>
You can find a working plnuker here.
UPDATE:
For testing I simply moved the main from the app.html to a
page's html file map.html. I didn't change the sides or ids. But the
menu is not appearing when clicking the button (also have been not
changed)
I've done that in this plunker. Now, the HomePage
has the menu on the right defined there in that hmtl file.
<ion-menu [content]="content" side="right" id="menu2">
<ion-toolbar danger>
<ion-title>Menu 2</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item menuClose="menu2" detail-none>
Close Menu 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-header>
<ion-navbar primary>
<button menuToggle="left" start>
<ion-icon name="menu">L</ion-icon>
</button>
<button menuToggle="right" end>
<ion-icon name="menu">R</ion-icon>
</button>
<ion-title>
Multiple Menus in Ionic2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content #content padding>
</ion-content>
Please notice the content
variable in the <ion-content>
element. Like you can read in Ionic docs:
To add a menu to an application, the element should be
added as a sibling to the content it belongs to. A local variable
should be added to the content element and passed to the menu element
in the content property. This tells the menu which content it is
attached to, so it knows which element to watch for gestures.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…