Side Menu in Ionic to be opened permanently when resolution more than 768px

agopikrishna · November 28, 2016, 5:30pm

Hi,
In Ionic 2. I have disabled the closing of side menu while selecting the menu item with commenting this.menu.close() in openPage(). but when I’m clicking or tapping on outside the side menu the side menu is closing. I need the side menu to be opened when resolution is more than 768px.

But when tapping or clicking outside the side menu closes the side menu.

How can I prevent the closing of side menu when tapping or clicking outside the side menu in Ionic 2?

domemue · July 23, 2017, 6:24pm

What I personally would do now, with the new grid system of Ionic 2, would be setting up a <ion-split-pane>, which acts as the container for your app content and side menu:

<ion-split-pane>
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>

  </ion-menu>

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

The whole result should then look something like this:

Big screen

Small screen