Ionic Side Menus

Ionic Side Menus (Delegate $ionicSideMenuDelegate): Ionic Side Menus are basically container which contains the main content and slide menu(s). You can add the menu in left or side. $ionicSideMenuDelegate service is used for menus. Here in this tutorial we are going to explain how to create slide menus with example and demo.

Ionic Side Menus

Side menus contains following components –

• ion-side-menus
• ion-side-menu-content
• ion-side-menu
• expose-aside-when
• menu-toggle
• menu-close
• $ionicSideMenuDelegate

Let us create a simple left menu and then we will go through each components. First we will import the service $ionicSideMenuDelegate in controller to use the menus functions. Let us first create js part and them the html part this simple menu.

Ionic Slide Menu : Controller Js Part

In controller part we have imported the service $ionicScrollDelegate and created a function toggleLeft which binds the toggle event to the menus.

Ionic Slide Menu : Html Part

Now let us create the html part contains the simple menu and body part as below –

<ion-side-menus>

    <!-- Center content -->
    <div>
        <ion-side-menu-content>
            <ion-header-bar class="amp-wp-inline-7931d6bfa7657757563c540505f220d6">
                <div>
                    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
                    <h1 class="title">www.tutorialsplane.com</h1>
                </div>

            </ion-header-bar>

            <ion-content scroll="true">

                <div class="content">  
                    <h2> Main Content </h2>
                    <p>Dummy Content...</p>
                </div>



            </ion-content>
        </ion-side-menu-content>
        <ion-side-menu>
            <div class="menu-wrapper ">
                <ul class="list">
                    <li class="item">Item 1</li>
                    <li class="item">Item 2</li>
                    <li class="item">Item 3</li>
                    <li class="item">Item 4</li>
                    <li class="item">Item 5</li>
                    <li class="item">Item 6</li>
                    <li class="item">Item 7</li>
                </ul>
            </div>
        </ion-side-menu>



</div></ion-side-menus>

ion-side-menus contains the menu and main content both. ion-side-menu-content contains the main content of the application. ion-header-bar creates header part. Header has the button with “burger icon” and the attribute directive menu-toggle=”left” which binds the menu toggle left functionality.

If you run the above example it will produce the following output –

ion-side-menus

To create side menu parent element <ion-side-menus> is required. It has at least two child elements –
– 1 . <ion-side-menu> – It contains the side menus.
– 2 . <ion-side-menu-content> – It is used for main content which is positioned at the center.

Here is structure for <ion-side-menus> and it’s elements-

<ion-side-menus>
  <!-- Left Side Menu -->
  <ion-side-menu side="left">
  </ion-side-menu>
  
  <!--- main Content part-->
  <ion-side-menu-content>
  
  </ion-side-menu-content>
  

  <!-- Right Side menu -->
  <ion-side-menu side="right">
  </ion-side-menu>

</ion-side-menus>

You can create left or right menu using the above ion-side-menu.

Options

• enable-menu-with-back-views[boolean (optional)] – It is basically used to decide whether to enable the side menu when the back button is showing. If you set it false the side menu
  toggle will be hidden and user will not be able to use it. It will be visible when user will go to home page ie root page.
• delegate-handle[string(optional)]– $ionicScrollDelegate is used to indentify the side menus.

ion-side-menu-content

This is child of ion-side-menus. This main content part of the application which displays the main content to users.

  <!--- main Content part-->
  <ion-side-menu-content>
  <h1>My Home Page</h1>
  <p>Main Para Starts here..</p>
  </ion-side-menu-content>

Options

• drag-content[boolean(optional)]: Used to set content dragging enabled or disabled. Default is set true.
• edge-drag-threshold[number(optional)]: Used to set the threshold distance to ie. distance from the top of the screen in pixel.

ion-side-menu

This is child of ion-side-menus and sibling of ion-side-menu-content directive. This is main side menu part.

  <!--- main Menu part-->
  <ion-side-menu>
     <div class="menu-wrapper ">
                <ul class="list">
                    <li class="item">Item 1</li>
                    <li class="item">Item 2</li>
                    <li class="item">Item 3</li>
                    <li class="item">Item 4</li>
                    <li class="item">Item 5</li>
                    <li class="item">Item 6</li>
                    <li class="item">Item 7</li>
                </ul>
            </div>
  </ion-side-menu>

This contains the menu items of the side menu.

Options

• side[string] : Used to assign Left or Right Side.
• is-enabled(optional): Used to enable or disable the menu.
• width[optinal]: Width of side menu in pixel. Default is 275px.

expose-aside-when

This is used to show and hide side menu landscape and portrait mode. You can set expose-aside-when=”large” to hide the menu. It hides the menu when viewport width is less than 786px and always shows when viewport width is more than the 786px.

  <!--- main Menu part-->
  <ion-side-menu expose-aside-when="large">
     <div class="menu-wrapper ">
                <ul class="list">
                    <li class="item">Item 1</li>
                    <li class="item">Item 2</li>
                    <li class="item">Item 3</li>
                    <li class="item">Item 4</li>
                    <li class="item">Item 5</li>
                    <li class="item">Item 6</li>
                    <li class="item">Item 7</li>
                </ul>
            </div>
  </ion-side-menu>