Question

默认情况下，单击侧面菜单按钮时，离子侧面菜单会按下当前页面。但我需要在大多数应用程序中重叠当前页面上的侧边菜单。怎么做？我应该在哪里更改代码？只需考虑离子的默认侧面菜单模板。

   <ion-side-menus enable-menu-with-back-views="false">
     <ion-side-menu-content>
    <ion-nav-bar class="bar-positive bar-blue">
     <ion-nav-back-button></ion-nav-back-button>
  <ion-nav-buttons side="left">
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
      </ion-nav-buttons>
       <ion-nav-buttons side="right">
       <a menu-close href="#/app/playlists" class="cancelbutton">
          <button class="button button-icon button-clear " ng-hide=cancelflag>cancel</button>
         </a>
         </ion-nav-buttons>
       </ion-nav-bar>
        <ion-nav-view name="menuContent"animation="fade-in-out"></ion-nav-view>
         </ion-side-menu-content>

    <ion-side-menu side="left">
<ion-header-bar class="bar-positive bar-image sidemenu-header">
  <h1 class="title title-left">{{currentuser}}</h1>
</ion-header-bar>
<ion-content>
  <ion-list>
    <!-- <ion-item menu-close href="#/testing">
      testinglogin
    </ion-item> -->
            <ion-item menu-close href="#/app/home" ng-show=adminflag>
      <label class="item-input labelclearpadding">
        <i class="icon paddingicon"><img src="img/user.png" alt="" class="placeholder dateicon"/></i>
        all details
      </label>
    </ion-item>
  </ion-list>
  <ion-list>
               </ion-list>
   </ion-content>
  </ion-side-menu>
  </ion-side-menus>

Answer 1

我正在研究离子2 ，这仅对同样有用。
我也在寻找同样的问题 -
我看了document here.
菜单类型解释非常清楚，添加type =“overlay”并完成我的任务

<ion-menu [content]="content" side="right" type="overlay">
   ................
     ...............
       lines of code goes here
     ...............
   ................

</ion-menu>

凡 -
Side =＆gt;从右切换 type =＆gt;在当前屏幕上显示菜单类型。

Answer 2

这仅在Ionic Framework 2中可用，如下所述：http://ionicframework.com/docs/v2/api/components/menu/Menu/。

菜单支持两种显示类型：叠加，显示和推送。 Overlay是传统的Material Design抽屉类型，而Reveal是传统的iOS类型。默认情况下，菜单将使用平台的正确类型，但可以使用type属性覆盖：

<ion-menu type="overlay" [content]="mycontent">...</ion-menu>

Answer 3

这可以通过利用ng-class和$ ionicSideMenuDelegate在离子1中实现。涉及3个步骤：

您需要向控制器添加一个范围函数，以便引用ng-class来返回菜单是否打开：

$scope.isMenuOpen = function() {  
    return $ionicSideMenuDelegate.isOpen();  
};

如果菜单已打开，您需要添加ng-class将在菜单内容上设置的类：

.menu-content.menu-open {
  transform: translate3d(0px, 0px, 0px) !important;
  z-index: -1;
  opacity: 0.4;
}

！important变换会覆盖单击菜单按钮时离子添加的变换，因此菜单内容保持不变。 z-index和opacity将使菜单内容显示在菜单后面的背景中。

将ng-class添加到您的html：

<ion-side-menus enable-menu-with-back-views="false">  
        <ion-side-menu-content ng-class="isMenuOpen() ? 'menu-open' : ''">  
            <ion-nav-bar class="bar-positive bar-blue">
                ...

你已经完成了！现在，无论何时菜单打开，菜单打开类都将应用于菜单内容，它将保持原位，但淡入背景，创建叠加外观。这里唯一的缺点是没有任何东西能够翻译你的菜单内容，因为你已经使用！important重写了这一点，所以如果你正在寻找其他动画，请记住这一点。

我在我的应用程序中使用左侧菜单进行操作。它也应该使用正确的菜单，因为您将动态类应用于菜单内容。

Answer 4

正确回答@henrikmerlander的问题，但是如果你想要Ionic 1的抽屉组件总是在iOS设备（叠加）上起作用，你可以使用它：

https://github.com/beaver71/ionic-ion-drawer

使用非常简单：

<drawer side="left">
    <ion-content>
     ....
    </ion-content>
</drawer>

以下是一个工作示例：http://codepen.io/beaver71/pen/BKpRjM/

如何在离子的当前页面上重叠侧面菜单？

4 个答案: