ion-side-menus
Delegate: $ionicSideMenuDelegate

A container element for side menu(s) and the main content. Allows the left and/or right side menu to be toggled by dragging the main content area side to side.

To automatically close an opened menu, you can add the menuClose attribute directive. The menu-close attribute is usually added to links and buttons within ion-side-menu-content, so that when the element is clicked, the opened side menu will automatically close.

“Burger Icon” toggles can be added to the header with the menuToggle attribute directive. Clicking the toggle will open and close the side menu like the menu-close directive. The side menu will automatically hide on child pages, but can be overridden with the enable-menu-with-back-views attribute mentioned below.

By default, side menus are hidden underneath their side menu content and can be opened by swiping the content left or right or by toggling a button to show the side menu. Additionally, by adding the exposeAsideWhen attribute directive to an ionSideMenu element directive, a side menu can be given instructions about “when” the menu should be exposed (always viewable).

For more information on side menus, check out:

• ionSideMenuContent
• ionSideMenu
• menuToggle
• menuClose
• exposeAsideWhen

Usage

To use side menus, add an <ion-side-menus> parent element. This will encompass all pages that have a side menu, and have at least 2 child elements: 1 <ion-side-menu-content> for the center content, and one or more <ion-side-menu> directives for each side menu(left/right) that you wish to place.

<ion-side-menus>
  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>

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

</ion-side-menus>

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

API