侧面菜单是最常用的离子组件之一。可以通过向左或向右滑动或触发为此创建的按钮来打开侧面菜单。

使用侧面菜单

我们需要的第一个元素是ion-side-menus 。该元素用于将侧边菜单与将要使用它的所有屏幕连接起来。离子侧菜单内容元素是放置内容的位置，离子侧菜单元素是可以放置侧指令的位置。我们将侧面菜单添加到index.html ，并将ion-nav-view放在侧面菜单内容中。这样，可以在整个应用程序中使用侧面菜单。

index.html

   side = "left">
      
SIde Menu
   

   
      
      
   

现在，我们将使用menu-toggle =“ left”指令创建按钮。此按钮通常放置在应用程序标题栏中，但为了更好的理解，我们会将其添加到模板文件中。

轻按按钮或向右滑动时，将打开侧面菜单。如果您只想用一个按钮关闭侧边菜单，也可以设置menu-close指令，但是我们将为此使用切换按钮。

HTML模板

上面的代码将产生以下屏幕-

您可以向“离子侧菜单”元素添加一些其他属性。显示后退按钮时，可以将具有后视图的启用菜单设置为false以禁用侧面菜单。这还将从标题中隐藏菜单切换按钮。另一个属性是委托句柄，将用于与$ ionicSideMenuDelegate的连接。

离子侧菜单含量元素可以使用其自己的属性。当drag-content属性设置为false时，它将通过滑动内容屏幕来禁用打开侧菜单的功能。 edge-drag-threshold属性的默认值为25。这意味着从屏幕的左边缘和右边缘仅允许滑动25个像素。我们可以更改此数字值，也可以将其设置为false以启用在整个屏幕上滑动，或将其设置为true以禁用它。

ion-side-menu可以使用上面示例中显示的side属性。它将确定菜单应从左侧还是右侧出现。值为’ false ‘的‘is-enabled’属性将禁用侧面菜单，而width属性值是一个数字，表示侧面菜单的宽度。默认值为275。

侧面菜单代表

$ ionicSideMenuDelegate是用于控制应用程序中所有侧面菜单的服务。我们将向您展示如何使用它，然后我们将介绍所有可用的选项。像所有Ionic服务一样，我们需要将其添加为对控制器的依赖项，然后在控制器范围内使用它。现在，当我们单击按钮时，所有侧面菜单将打开。

控制器代码

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
   };
})

HTML代码

下表显示了$ ionicScrollDelegate方法。

委托方法