Menu won't appear

Ionic Framework ionic-v3
1

i’m trying to create a simple menu in the navbar with ionic2. but it’s not showing up i can’t seem to understand why. This is the current code i have: app.ts

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import {MenuPage} from './pages/menu/menu';

@App({
  templateUrl: 'build/index.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;
    platform.ready().then(() => {
    });
  }

}

index.html:

<ion-nav #content [root]="rootPage"></ion-nav>

menu.ts:

import{Page, MenuController} from 'ionic-angular';
@Page({
    templateUrl: 'build/pages/menu/menu.html'
})
export class MenuPage {
 constructor(menu: MenuController) {
   this.menu = menu;
 }

 openMenu() {
   this.menu.open();
 }

}

menu.html:

<ion-menu  persistent="true" [content]="content">
  <ion-toolbar>
    <ion-title>Instellingen</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item>
        Informatie
      </button>
      <button ion-item>
        Veelgestelde vragen
      </button>
      <button ion-item>
        Algemene Voorwaarden
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

No errors, i don’t see any problems view loads normally. Just no menu. Does someone know why this doesn’t work?

2

you have pointed your rootPage to TabsPage. You have to assign this.rootPage as MenuPage

3

But i want tabs and a menupage how should i go about that?

4

In that case, you can include the content inside menu.html in index.html itself. Check the ionic 2 example https://github.com/driftyco/ionic-conference-app to get both tabs and menu together

5

Yes i also saw that in the tutorials so i tried the approach but it didn’t work either. the codepen: http://codepen.io/sjerd/pen/xVZdjb

EDIT
It does work. it is just that it is a swipe menu so there doesn’t appear a button to toggle it…

6

Hey there! So you need to manually add button to toggle the menu.

7

Thanks very much. I found it when diving through the docs to the navbar after I noticed it worked on swipe. maybe reference that a menu-button won’t appear on default when you’re using a menu at the api docs.

Thanks again for this framework and the effort you and your team mates put in to this :slight_smile:

1 Like
8

omg, thank you this is what I’ve been looking for. thank you.

9

KODOS ionic 2 i love it