Hello Readers,

Side menus widely uses in mobile application and it provides a user friendly interface. Ionic framework provides an excellent directive which is easy to implement. In this post we will learn implementation of side menus in our app.

Introduction:

ion-side-menus is the parent container of ionic side menu. ion-side-menu and ion-side-menu-content is the child of ion-side-menus. Where ion-side-menu is used to show content in right or left side i.e side="right" and side="left" and ion-side-menu-content is used to show content.

Example:

<ion-side-menus> <!-- Parent container -->  
  
    <ion-side-menu-content> <!-- To show content of Side Menu --> 
    </ion-side-menu-content>
 
    <ion-side-menu side="left"> <!-- Left Side Menu --> 
    </ion-side-menu>
 
    <ion-side-menu side="right"> <!-- Right Side Menu -->
    </ion-side-menu>

</ion-side-menus>

Ionic Framework provides an ionic side menu template so we can create ionic side menu application through CLI mentioned below:

$ ionic start sideMenuApp sidemenu

After creating project in www folder index.html is the root html file and browse, login, menu, playlist, playlists, search are html files contains in template folder. menu.html file contains side-menu code.

menu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

In the above code we have a side menu on left side. Now you can build an application with sliding out side menu and it is works on iOS, Android and window application.

Hope this will help you :)