YouTip

A container element that includes a side menu and main content. The left or right side menu is toggled by dragging the main content area from one side to the other.\n\nThe effect is shown as follows:\n\n!(#)\n\n### Usage\n\nTo use the side menu, add a parent element , a center content , and one or more directives.\n\n function ContentController($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); };}\n### API\n\n| Attribute | Type | Details |\n| --- | --- | --- |\n| enable-menu-with-back-views _(optional)_ | `Boolean` | Determines whether the side menu is enabled when the back button is showing. |\n| delegate-handle | String | The handle used to identify the scroll view with $ionicScrollDelegate. |\n\n* * *\n\n## ion-side-menu-content\n\nA container for the visible main content, sibling to one or more ionSideMenu directives.\n\n### Usage\n\n### API\n\n| Attribute | Type | Details |\n| --- | --- | --- |\n| drag-content _(optional)_ | `Boolean` | Whether the content can be dragged. Defaults to true. |\n\n* * *\n\n## ion-side-menu\n\nA container for a side menu, sibling to one ion-side-menu-content directive.\n\n### Usage\n\n### API\n\n| Attribute | Type | Details |\n| --- | --- | --- |\n| side | `String` | Which side the side menu is currently on. Possible values: 'left' or 'right'. |\n| is-enabled _(optional)_ | `Boolean` | Whether this side menu is enabled. |\n| width _(optional)_ | `Number` | How many pixels wide the side menu should be. Defaults to 275. |\n\n* * *\n\n## menu-toggle\n\nToggles the menu in a specified side.\n\n### Usage\n\nHere is an example of a link within a navbar. Clicking this link will automatically open the specified side menu.\n\n ... \n## menu-close\n\nCloses the currently opened side menu.\n\n### Usage\n\nHere is an example of a link within a navbar. Clicking this link will automatically close the currently opened side menu.\n\nHome\n\n* * *\n\n## $ionicSideMenuDelegate\n\nThis method directly triggers the $ionicSideMenuDelegate service to control all side menus. Use the $getByHandle method to control specific ionSideMenus instances.\n\n### Usage\n\n Content! Toggle left sidebar menu Left menu! function MainCtrl($scope, $ionicSideMenuDelegate) { $scope.toggleLeftSideMenu = function() { $ionicSideMenuDelegate.toggleLeft(); };}\n### Methods\n\ntoggleLeft()\nToggles the left side menu (if it exists).\n\n| Parameter | Type | Details |\n| --- | --- | --- |\n| isOpen _(optional)_ | `Boolean` | Whether to open or close the menu. Default: toggles the menu. |\ntoggleRight()\nToggles the right side menu (if it exists).\n\n| Parameter | Type | Details |\n| --- | --- | --- |\n| isOpen _(optional)_ | `Boolean` | Whether to open or close the menu. Default: toggles the menu. |\ngetOpenRatio()\nGets the ratio of open menu content over the menu width. For example, a menu 100px wide opened 50px (50%) will return a ratio of 0.5.\n\n**Returns:** Float 0 if not opened, 0 to 1 if the left menu is open or opening, 0 to -1 if the right menu is open or opening.\n\nisOpen()\n**Returns:** Boolean, whether the left or right menu is already open.\n\nisOpenLeft()\n**Returns:** Boolean whether the left menu is already open.\n\nisOpenRight()\n**Returns:** Boolean whether the right menu is already open.\n\ncanDragContent()\n| Parameter | Type | Details |\n| --- | --- | --- |\n| canDrag _(optional)_ | `Boolean` | Sets whether content can be dragged to open the side menu. |\n\n**Returns:** Boolean, whether content can be dragged to open the side menu.\n\n$getByHandle(handle)\n| Parameter | Type | Details |\n| --- | --- | --- |\n| handle | `String` | |\n\nFor example:\n\n$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();