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

Ionic Slide Menus: Example

<script type="text/javascript">
angular.module('todo', ['ionic'])
.controller('MainCtrl', function($scope, $ionicScrollDelegate) {
$scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
});

</script>

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 –

Ionic Slide Menus: Example

<body ng-app="todo" ng-controller="MainCtrl">

<ion-side-menus>

    <!-- Center content -->
    <div>
        <ion-side-menu-content>
            <ion-header-bar style="background-color:#B90028">
                <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>
</ion-side-menus>
</body>

Try it »

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.

Tip : If you want to add the toggle right instead of left toggle add menu-toggle=”right” instead of menu-toggle=”right” and change the controller toggle function as $ionicSideMenuDelegate.toggleRight().

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

Ionic Slide Menus toggle close open Example


Learn More About Ionic Menus

Let us learn in details about ionic menus.


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: Ionic Side Menu Bar Toggle Example

<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.

ion-side-menu-content: Ionic Side Menu Bar

  <!--- 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.

ion-side-menu : Ionic Side Menu Bar Example

  <!--- 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.

expose-aside-when : Ionic Side bar show in portrait mode Example

  <!--- 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>

Advertisements

Add Comment