sahnoun sahnoun - 3 years ago 222
Javascript Question

Ionic 2 menu transition

I followed the menu documentation of ionic 2 and I want to display the menu like this:
enter image description here

so the menu is displayed below the content page and the menu button still displayed.

but when I run my app I got this :

enter image description here

the menu is displayed above the content page and the button disappear !
here is app.html code :

<ion-menu side="left" id="loggedInMenu" [content]="content">

<button ion-item menuClose="loggedInMenu" *ngFor="let p of appPages" (click)="openPage(p)">
<ion-icon item-start [name]="p.icon" [color]="isActive(p)" ></ion-icon>
<!-- main navigation -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" main name="app"></ion-nav>


app.componenent.ts :

import { Component, ViewChild } from '@angular/core';
import { Platform,MenuController, Nav, } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { MainPage } from '../pages/main/main';
import { MyDogsPage } from '../pages/my-dogs/my-dogs';
import { MyCoursesPage } from '../pages/my-courses/my-courses';
import { FriendsPage } from '../pages/friends/friends';
import { TrainersPage } from '../pages/trainers/trainers';
import { AuthenticationProvider } from '../providers/authentication/authentication'

export interface PageInterface {
title: string;
component: any;
icon: string;
index?: number;


templateUrl: 'app.html'
export class MyApp {
@ViewChild(Nav) nav: Nav;
appPages: PageInterface[] = [
{ title: 'Account', component: MainPage, index: 0, icon: 'finger-print' },
{ title: 'My Dogs', component: MyDogsPage,index: 1, icon: 'paw' },
{ title: 'My Course', component: MyCoursesPage, index: 2, icon: 'book' },
{ title: 'Friends', component: FriendsPage, index: 3, icon: 'people' },
{ title: 'My Trainers', component: TrainersPage, index: 4, icon: 'man' },

currentTitle ='';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public userData: AuthenticationProvider, public menuctrl: MenuController) {
this.rootPage=(localStorage.disableintro? LoginPage:HomePage)
this.userData.hasLoggedIn().then((hasLoggedIn) => {
this.enableMenu(hasLoggedIn === true);

platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.

enableMenu(loggedIn: boolean) {
this.menuctrl.enable(loggedIn, 'loggedInMenu');

openPage(page) {
let params = {};

this.nav.setRoot(page.component, params).catch((err: any) => {

console.log(`Didn't set nav root: ${err}`);


isActive(page: PageInterface) {
let childNav = this.nav.getActiveChildNavs()[0];

// Tabs are a special case because they have their own navigation
if (childNav) {
if (childNav.getSelected() ) {
return 'primary';

if (this.nav.getActive() && this.nav.getActive().name === page.title) {
return 'primary';

some help please.

Answer Source

Try adding type='reveal to your <ion-menu>-element:

<ion-menu type='reveal' side="left" id="loggedInMenu" [content]="content">

The docs say:
'The default type for both Material Design and Windows mode is overlay, and reveal is the default type for iOS mode.'

The wanted result you're showing is displayed in iOS mode. The result you're getting is in Material Design mode.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download