Question

我已经在plunker中找到了这个模板，但是当屏幕为600像素或更低时，sidenav会消失，如何添加汉堡包按钮来显示和隐藏sidenav菜单？

http://embed.plnkr.co/d3zExiS03YNOMLHdfEIj/preview

Answer 1

我改变了一点 home.view.html 和 home.controller.js 我认为我按你的意愿制作了它。

for cname in match:
         TotalData .= ","+cname[0].decode('utf-8');

print TotalData

和

<div layout="row">
  <section layout="column" layout-fill>
    <md-sidenav class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
      <md-toolbar class="md-toolbar-tools" md-scroll-shrink>
        <h3>My App Title</h3>
        <md-button aria-label="Close" class="md-icon-button" ng-click="vm.toggleMenu()" hide-gt-sm>
            X
        </md-button>
      </md-toolbar>
      <md-content role="navigation">
        <ul class="side-menu">
          <li ng-repeat="section in vm.menu.sections" class="parent-list-item"
              ng-class="{'parentActive' : vm.isSectionSelected(section)}">
            <h2 class="menu-heading" ng-if="section.type === 'heading'"
                id="heading_{{ section.name | nospace }}">
              {{section}}
            </h2>
            <menu-link section="section" ng-if="section.type === 'link'"></menu-link>
            <menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
          </li>
        </ul>
      </md-content>
    </md-sidenav>
    <md-toolbar hide-gt-sm>
        <md-button aria-label="Menu" class="md-icon-button" ng-click="vm.toggleMenu()">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
            </svg>
        </md-button>
    </md-toolbar>
    <md-content flex>
      <ui-view name="content"></ui-view>
    </md-content>
  </section>
</div>

如何在角料sidenav中添加汉堡包按钮

1 个答案: