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