I have an Ionic app and need to put a THIRD menu on it.
I set up 2 menus already, but the third, which is specifically from a child page is not working. Even the menu button is not showing.
Here’s my code:
APP.HTML
<!-- MENU 01 -->
<ion-menu persistent="true" [content]="content" side="left" id="menu1">
<ion-header>
<ion-toolbar>
<ion-title>Menu 01</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Menu 01 - Content
</ion-content>
</ion-menu>
<!-- MENU 02 -->
<ion-menu persistent="true" [content]="content" side="left" id="menu2">
<ion-header>
<ion-toolbar>
<ion-title>Menu 02</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Menu 02 - Content
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
HOME.HTML
<ion-header>
<ion-navbar>
<button ion-button menuToggle="menu1" start>
<ion-icon name="md-menu"></ion-icon>
</button>
<ion-title>Home</ion-title>
<button ion-button menuToggle="menu2" end>
<ion-icon name="md-menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content #content padding> Home Content </ion-content>
CHILD PAGE WITH SPECIFIC MENU
<ion-header>
<ion-navbar>
<button ion-button menuToggle="menu1" start>
<ion-icon name="md-menu"></ion-icon>
</button>
<ion-title>Child Page</ion-title>
<button ion-button menuToggle="menu3" end>
<ion-icon name="md-menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content #childContent>
Collection
</ion-content>
<!-- Collection MENU -->
<ion-menu persistent="true" [content]="childContent" side="right" id="menu3">
<ion-header>
<ion-toolbar>
<ion-title>Menu 03</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Menu 03 - Content
</ion-content>
</ion-menu>
I need to the Menu01 and the Menu03 coexist cause the 1st is my app menu, the other one is like a filter settings for the child page. Any help??