❮ Ionic Ion Header Bar Ionic Range ❯

Ionic Side Menu

A container element that includes the side menu and main content. By dragging the main content area from one side to the other, you can toggle the left or right side menu.

Here is the effect diagram:

Usage

To use the side menu, add a parent element <ion-side-menus>, a middle content <ion-side-menu-content>, and one or more <ion-side-menu> directives.

<ion-side-menus>
  <!-- Middle content -->
  &lt;ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- Left menu -->
  &lt;ion-side-menu side="left">
  </ion-side-menu>

  <!-- Right menu -->
  &lt;ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

Try it »

API

Attribute	Type	Details
enable-menu-with-back-views (optional)	Boolean	Determines whether to enable the side menu when the back button is visible.
delegate-handle	String	The handle used to identify the scroll view with $ionicScrollDelegate.

ion-side-menu-content

A container for the visible main content, sibling to one or more <ion-side-menu> directives.

Usage

&lt;ion-side-menu-content
  drag-content="true">
</ion-side-menu-content>

API

Attribute	Type	Details
drag-content (optional)	Boolean	Whether the content is draggable. Defaults to true.

ion-side-menu

A container for a side menu, sibling to an <ion-side-menu-content> directive.

Usage

&lt;ion-side-menu
  side="left"
  width="myWidthValue + 20"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

API

Attribute	Type	Details
side	String	Which side the side menu is currently on. Possible values: 'left' or 'right'.
is-enabled (optional)	Boolean	Whether the side menu is enabled.
width (optional)	Number	How many pixels wide the side menu should be. Defaults to 275.

menu-toggle

Toggles the menu in a specified side.

Usage

Here is an example of a link inside a navigation bar. Clicking this link will automatically open the specified side menu.

<ion-view>
  &lt;ion-nav-buttons side="left">
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
 ...
</ion-view>

menu-close

Closes the currently opened side menu.

Usage

Here is an example of a link inside a navigation bar. Clicking this link will automatically close the specified side menu.

&lt;a menu-close href="#/home" class="item">Home</a>

$ionicSideMenuDelegate

This method directly triggers the $ionicSideMenuDelegate service to control all side menus. Use the $getByHandle method to control specific instances of <ion-side-menus>.

Usage

<body ng-controller="MainCtrl">
  <ion-side-menus>
    <ion-side-menu-content>
      Content!

<button ng-click="toggleLeftSideMenu()">
  Toggle Left Side Menu
</button>
</ion-side-menu-content>
&lt;ion-side-menu side="left">
  Left Menu!
<ion-side-menu>
</ion-side-menus>
</body>

function MainCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

Methods

toggleLeft([isOpen])

Toggle the left side menu (if it exists).

Parameter	Type	Details
isOpen (optional)	Boolean	Whether to open or close the menu. Default: toggle the menu.

toggleRight([isOpen])

Toggle the right side menu (if it exists).

Parameter	Type	Details
isOpen (optional)	Boolean	Whether to open or close the menu. Default: toggle the menu.

getOpenRatio()

Get the ratio of the open menu content that exceeds the menu width. For example, a menu with a width of 100px opened to a width of 50px at 50% would return a ratio of 0.5.

Returns: Float 0 means not open, if the left menu is open or opening from 0 to 1, if the right menu is open or opening from 0 to -1.

isOpen()

Returns: Boolean, whether the left or right menu is open.

isOpenLeft()

Returns: Boolean, whether the left menu is open.

isOpenRight()

Returns: Boolean, whether the right menu is open.

canDragContent([canDrag])

Parameter	Type	Details
canDrag (optional)	Boolean	Set whether the content can be dragged to open the side menu.

Returns: Boolean, whether the content can be dragged to open the side menu.

$getByHandle(handle)

Parameter	Type	Details
handle	String

Example:

$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();

❮ Ionic Ion Header Bar Ionic Range ❯