Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70747

Ionic2 Adding a Third Menu for a specific page

$
0
0

@rafaeldcastro wrote:

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??

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70747

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>