使用菜单创建角度材质导航栏

Question

我正在尝试使用谷歌材料设计在angularjs中建立一个网站。我的codepen网址是http://codepen.io/milindsaraswala/pen/yJaYpe

一些代码

<md-content class="navBar">
  <!--class="md-padding"-->
  <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
    <md-nav-item md-nav-click="goto('page1')" name="page1">Item-1</md-nav-item>
    <md-nav-item md-nav-click="goto('page2')" name="page2">Item-2</md-nav-item>
    <md-nav-item md-nav-click="goto('page3')" name="page3">Item-3</md-nav-item>
    <md-nav-item md-nav-click="goto('page4')" name="page4">Item-4</md-nav-item>
    <md-nav-item md-nav-click="goto('page5')" name="page5">Item-5</md-nav-item>
    <!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
    <md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
    <md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>-->
  </md-nav-bar>
</md-content>

我正在为网站制作导航菜单，就像这样

如果有人可以帮助我，我将非常感激。我在过去的3-4天里一直在努力，但一直无法做到。

Answer 1

为了达到预期的效果，我使用了ng-hide和ng-show来显示下拉列表

          <md-nav-item md-nav-click="goto('page1')" ng-click="toggle=!toggle" name="page1">Item-1
        <div class="menuDrop" ng-show="item1 = toggle" ng-hide="item1 =!toggle">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>

        </div>
      </md-nav-item>

JS： $ scope.toggle = true; //控制ng-show和ng-hide onclick

Codepen- http://codepen.io/nagasai/pen/RRGPdj

Answer 2

您可以使用Menu。

这是一个例子。

<md-content flex layout="column">
<md-toolbar>
  <div class="md-toolbar-tools">
    <md-menu>
      <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
        Navigation Menu
      </md-button>
      <md-menu-content width="6">
        <md-menu-item ng-repeat="item in [1, 2, 3]">
          <md-button ng-click="navigateTo($index)">
            <md-icon md-menu-align-target md-svg-icon="call:no-sim"></md-icon>
            Option {{item}}
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
    <span flex></span>
  </div>
</md-toolbar>
<md-content>
 //Page Content
</md-content>

以下是工作示例。http://codepen.io/next1/pen/PzWZJv

它也在用键盘敲击。