Nested Menu in Ionic

Ionic Framework ionic-v3
1

Sorry, but I didn’t find anything about nested menu in Ionic 2.

Does anyone know how to do? I was thinking in using Jquery, but it would slow down my app a lot.

I’m trying to do a sidenav like this.
image

2

Here’s a quick idea that might help you find a solution.

showSubmenu: boolean = false;

menuItemHandler(): void {
  this.showSubmenu = !this.showSubmenu;
}

<ion-list id="sidenav">
<!-- other menu items will go here -->
  <ion-item (click)="menuItemHandler()">Main Menu</ion-item>
  <ion-item submenu-item *ngIf="showSubmenu">Sub menu item</ion-item>
  <ion-item submenu-item *ngIf="showSubmenu">Sub menu item</ion-item>
  <ion-item submenu-item *ngIf="showSubmenu">Sub menu item</ion-item>
<!-- other menu items will go here -->
</ion-list>

#sidenav {
  ion-item[submenu-item] {
    padding-left: 25px; // maybe margin-left would work better to move the border as well
    color: #ccc;
  }
}

This method wouldn’t have a smooth transition though, since you’re just manipulating the dom to do that. To get a smooth animation you might wanna do something like this instead:

<ion-list id="sidenav">
<!-- other menu items will go here -->
  <ion-item (click)="menuItemHandler()">Main Menu</ion-item>
  <ion-item-group submenu [class.visible]="showSubmenu">
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
  </ion-item-group>
<!-- other menu items will go here -->
</ion-list>

#sidenav {
  ion-item-group[sidemenu] {
    overflow: hidden;
    display: block;
    height: 0;
    transition: height .3s linear;
    &.visible {
        height: 300px;
        // this is just sample value, calculate how much space you need for your menu items
    }
  }
}
2 Likes
3

Another idea is to simply render 1 flat menu - in which submenu indentations are managed using CSS, so structurally you have one level to work with, it’s just the styling for certain items may be slightly different. I believe that should be entirely doable - I suppose maintaining a hierarchy of items would require some CSS work anyway.

4

Thank you very much, it worked perfectly.

Just two minor changes

#sidenav {
  ion-item-group[submenu] {
    overflow: hidden;
    display: block;
    height: 0;
    transition: height .3s linear;
    &.visible {
        height: inherit;
        // this is just sample value, calculate how much space you need for your menu items
    }
  }
}

I changed from ion-item-group[submenu] to ion-item-group[sidemenu], and height to inherit.

Thanks, that was exactly what I needed.

1 Like
5

Thanks very much for this.

I’ve chosen to transition the CSS transform property as this can be offloaded to the GPU and thus will perform much better than animating the height.

One potential banana skin with this approach is that the submenu will still take up space in the DOM when closed. We can get around this by using max-height. We set some additional transitions on max-height in order to:

  • set the max-height immediately to 9999px when the submenu is opened
  • wait until the submenu has finished closing before setting max-height back to 0

The actual ‘transition’ of max-height happens immediately, so there is no performance lag.

ion-menu [submenu] {
  display: block;
  padding-left: 25px;
  overflow: hidden;
  max-height: 0;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .1s linear, max-height 0s .1s linear;
  &.visible {
    max-height: 9999px;
    transform: scaleY(1);
    transition: transform .1s linear, max-height 0s linear;
  }
}
6

hi ,

I am beginner to Ionic 2
how I create menu with submenu
Kindly help to me…

Thanks & regards,

7

hi,
i am crateting sidemenu in submenu but scss not called plz my problem slove them

8

but when I used inherit for height it lost its transition effect. when clicked it just throws out all the sub menus at the same time. is there any solution for this?

9

use max-height instead of height
ex:
max-height: 100px (or any value u want)

1 Like
10

where should i place this code…?

11

okay i got it …thanks for your replay

12

Hi, Please provide a working link for the demo. I want to use subMenu in an existing project but I don’t want to change the whole code. I need to see the working.