离子左侧菜单与汉堡包

Question

如何用汉堡按钮创建离子左侧菜单？

与此类似的东西：

Answer 1

好吧，因为它仍然与搜索引擎相关。我也在这里结束了。这是一种方法：

下面的代码插入了侧面菜单选项。 SRC /应用程序/ app.html

<ion-menu [content]="mySideMeu">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Menu Bar
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>

    <ion-list>
        <button ion-item menuClose (click)="onOpenPage(settingsPage)"><ion-icon name="settings" item-left></ion-icon> Settings</button>
        <button ion-item menuClose (click)="onOpenPage(otherPage)"><ion-icon name="car" item-left></ion-icon> Other Page</button>
    </ion-list>

  </ion-content>
</ion-menu>

<ion-nav #mySideMeu [root]="homePage"></ion-nav>

Now that you have created the side menu, you are ready to just slide it off of the side of the screen, even though you can't see that is there.
It's now time to add the 'hamburger' icon on the screens that you want it to appear. Keep in mind that you may not want it to appear in all the pages. So, for that side menu to slide out with a touch (click) you add the following code below to every screen(page) you want it to appear.

<ion-header>
  <ion-navbar>
    
    <ion-buttons start>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    
    <ion-title>Profile</ion-title>
  </ion-navbar>
</ion-header>

这个侧面菜单工作的关键是指令“menuToggle”在不同的页面视图/屏幕上打开侧面菜单，指令“menuClose”在单击后关闭侧面菜单。

干杯。