ionic2 keeping side menu open

Question

I'm working with ionic 2, and I have a ion-menu on the left side of the app, which keeps closing when I open the menu and touch to the page area.

I'd like to make it to keep opened and to close only when the user explicitly order to close it(via close button, or maybe swiping back, whatever). is there any option or workaround to doing like that?

EDIT: I started with ionic2-starter-sidemenu. when I run it, it looks like:

---------------------------------------------------------------
|           | <menuToggle button>                             |
|           |-------------------------------------------------|
|           |                                                 |
|           |                                                 |
|     /*    |                                                 |
| side menu |                                                 |
| toggled by|                                                 |
| menuToggle|           /* Content of each Pages */           |
|   button  |                                                 |
|     */    |                                                 |
|           |                                                 |
|           |                                                 |
|           |                                                 |
---------------------------------------------------------------

and when I click the page content area, the menu closes like this:

---------------------------------------------------------------
| <menuToggle button>                                         |
|-------------------------------------------------------------|
|                                                             |
|                                                             |
|                                                             |
|                                                             |
|                /* Content of each Pages */                  |
|                                                             |
|                                                             |
|                                                             |
|                                                             |
|                                                             |
---------------------------------------------------------------

I tried reading documentation and searched ionic forum, but found nothing to resolve it.

Welcome to SO, Please show us what you are trying to do and what is expected with the code snippets. Only verbose are not very helpful for the answers. — Jeet, Dec 12 '16 at 07:32
Check out the docs for the `MenuController` https://ionicframework.com/docs/v2/api/components/menu/MenuController/ — Ivar Reukers, Dec 12 '16 at 09:22

score 3 · Answer 1 · answered Feb 04 '17 at 01:24

Here is a quick hack until they release an update:

First: Remove menuClose from any of your current side menu buttons

Then in app.component.ts call the MenuController:

constructor(public menuCtrl: MenuController, public platform: Platform) {...

...
initializeApp() {
    this.platform.ready().then(() => {
        this.menuCtrl.open();
    });
}

This does 2 simple behaviors that expose-aside-when did basically:

opens the menu when the app is loaded
prevents any nav buttons from closing the menu

score 2 · Answer 2 · answered Aug 11 '17 at 10:02

2

Hope this answer isn't too late. However ionic 2 now supports the splitplane that works exactly as you described. Its syntax is as:

<ion-split-pane>
  <!--  our side menu  -->
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>

answered Aug 11 '17 at 10:02

Isaac Obella

2,613
2
16
29

Could not get it to work with Angular's ``. – alex351 Nov 10 '17 at 09:24
are you using the ionic 3/2 routing or angular 2/4 routing – Isaac Obella Nov 10 '17 at 09:40
angular routing, like I said. Ionic has the `ion-nav`, angular has the `router-outlet`. – alex351 Nov 10 '17 at 15:39

score 0 · Answer 3 · edited Jan 28 '17 at 12:16

try this, it works well for me:

<ion-navbar >
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title></ion-title>
  <ion-buttons start>
    <button ion-button (click)="func1()">
      <ion-icon name="add-circle"></ion-icon>
    </button>
    <button ion-button (click)="func2()">
      <ion-icon ios="ios-exit" md="md-exit"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

score 0 · Answer 4 · answered Jan 28 '17 at 12:27

To stop the menu from closing you can remove the menuClose attribute/directive in app.html (here's a link to it in the reference project source)

i.e. this menuClose bit:

<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

Here's some more info on the MenuClose directive, and note that you can close the menu programmatically too.

Also, depending on the menu type you're using, you may find the reveal works better than the default overlay mode.

ionic2 keeping side menu open

4 Answers4

Linked