ionic tutorial - Ionic Side Menu | Ionic - JavaScript Side Menu - ionic - ionic development - ionic 2 - ionic framework
- The Menu component is a navigation drawer that slides in from the side of the current view.
- By default, it slides in from the left, but the side can be overridden. The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.
- The menu element should be a sibling to the app's content element. There can be any number of menus attached to the content.
- These can be controlled from the templates, or programmatically using the MenuController.
- Side menu is one of the most used Ionic components. Side menu can be opened by swiping to the left or right or by triggering the button created for that purpose.
Using Side Menu
- First element that we need is ion-side-menus. This element is used for connecting side menu with all screens that will use it.
- ion-side-menu-content element is where the content will be placed and ion-side-menu element is the place where we can put side directive.
- We will add side menu to index.html and place ion-nav-view inside side menu content. This way the side menu can be used throughout entire app.
index.html
<ion-side-menus>
<ion-side-menu>side = "left">
<h1>Side Menu</h1>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Now we will create button with menu-toggle = "left" directive.
- This button will usually be placed in the apps header bar but we will add it in our template file for the purpose of better understanding.
- Now when the button is tapped or when we swipe to the right, the side menu will open.
- You could also set menu-close directive if you would like to have one button only for closing side menu, but we will use toggle button for this.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
HTML Template
<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- You can add some additional attributes to ion-side-menus element.
- enable-menu-with-back-views can be set to false to disable side menu when the back button is showed.
- This will also hide menu-toggle button from the header.
- The other attribute is delegate-handle that will be use for connection with $ionicSideMenuDelegate. This will be covered later.
- ion-side-menu-content element can use its own attribute.
- When drag-content attribute is set to false, it will disable ability to open side menu by swiping content screen.
- edge-drag-threshold attribute has default value of 25.
- This means that swiping is allowed only 25 pixels from the left and right edge of the screen.
- We can change this number value or we can set it to false to enable swiping on entire screen or true to disable it.
- ion-side-menu can use side attribute that we showed in example above.
- It will determine weather the menu should appear from the left or the right side.
- is-enabled attribute with false value will disable side menu, and width attribute value is number that represents how wide side menu should be. Default value is 275.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Side Menu Delegate
- $ionicSideMenuDelegate is service used for controlling all side menus in the app.
- We will show you how to use it, and then we will go through all the options available.
- Like all Ionic services, we need to add it as dependency to our controller and the use it inside controllers scope.
- Now when we click the button, all of the side menus will open.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Controller Code
.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.toggleLeftSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
HTML Code
<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- The following table shows $ionicScrollDelegate methods.
Delegate Methods
| Method | Parameters | Type | Details |
|---|---|---|---|
| toggleLeft (parameter) |
isOpen | boolean | Used for opening or closing side menu. |
| toggleRight (parameter) |
isOpen | boolean | Used for opening or closing side menu. |
| getOpenRatio() | / | / | Returns ratio of open part over menu width. If half of the menu is open from the left, the ration will be 0.5. If side menu is closed, it will return 0. If half of the menu is open from the right side, it will return -0.5. |
| isOpen() | / | boolean | Returns true if side menu is open, false if it is closed |
| isOpenLeft() | / | boolean | Returns true if left side menu is open, false if it is closed. |
| isOpenRight() | / | boolean | returns true if right side menu is open, false if it is closed. |
| getScrollPosition() | / | / | Returns object with two number as properties: left and right. These numbers represent the distance the user has scrolled from the left and from the top respectively. |
| canDragContent (parameter1) |
canDrag | boolean | Whether the content can be dragged to open side menu. |
| edgeDragThreshold (parameter1) |
value | boolean|number | If the value is true, the side menu can be opened by dragging 25px from the edges of the screen. If it is false, dragging is disabled. We can set any number that will represent pixel value from the left and right edge of the screen. |
| $getByHandle (parameter1) |
handle | string | Used to connect methods to the particular side menu view with the same handle. $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft(); |