Ionic js 17: Sidebar Menu

A container element contains side menus and main content. Toggle the sidebar menu on the left or right by dragging the main content area from one side to the other.
As shown below:

?

?

Usage
To use the sidebar menu, add a parent element, an intermediate content, and one or more instructions.

<Ion-side-menus>  <!--Intermediate Content -  <ion-side-menu-contentNg-controller= "Contentcontroller">  </ion-side-menu-content>  <!--left menu -  <Ion-side-menuside= "Left">  </Ion-side-menu>  <!--menu on the right -  <Ion-side-menuside= "Right">  </Ion-side-menu></Ion-side-menus>

function Contentcontroller ($scope, $ionicSideMenuDelegate) {  function() {    $ Ionicsidemenudelegate.toggleleft ();  };}

?

?

?

Ion-side-menu-content
A container of visible principal content, one or more ionsidemenu directives of a sibling.
Usage

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

?

Ion-side-menu
A container for a sidebar menu, a ion-side-menu-content instruction of a sibling.
Usage

< Ion-side-menu   side = "Left"   width= "Mywidthvalue +"  is-enabled= "shouldleftsidemenubeenabled ()"  ></ion-side-menu>

?

Menu-toggle
Toggles the menu in a specified sidebar.
Usage
Here is an example of a link within the navigation bar. Clicking this link will automatically open the specified sidebar menu.

<Ion-view>  <ion-nav-buttonsside= "Left">   <ButtonMenu-toggle= "Left"class= "button Button-icon icon Ion-navicon"></Button>  </ion-nav-buttons> ...</Ion-view>

Menu-close
Close the currently open sidebar menu.
Usage
Here is an example of a link within the navigation bar. Clicking this link will automatically open the specified sidebar menu.

<menu-close href= "#/home"  class= "item"> Home Page </ a >

$ionicSideMenuDelegate
This method directly triggers \ (ionicsidemenudelegate service, to control all sidebar menus. Use the \) Getbyhandle method to control Ionsidemenus in a particular case.
Usage

<BodyNg-controller= "Mainctrl">  <Ion-side-menus>    <ion-side-menu-content>content! <ButtonNg-click= "Toggleleftsidemenu ()">Toggle left Sidebar menu</Button>    </ion-side-menu-content>    <Ion-side-menuside= "Left">left Menu! <Ion-side-menu>  </Ion-side-menus></Body>

function Mainctrl ($scope, $ionicSideMenuDelegate) {  function() {    $ Ionicsidemenudelegate.toggleleft ();  };}

Method

Toggleleft ([IsOpen])

?
?

Ionic js 17: Sidebar Menu