Erstellen von Angular Material Nav-Bar mit Menü

Question

Ich versuche, eine Website in angularjs mit Google Material Design zu bauen. Mein codepen url ist http://codepen.io/milindsaraswala/pen/yJaYpe

einige Code

<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> 

Ich war auf der Suche zu machen ein Navigationsmenü für die Website, so etwas wie diese

Wenn jemand mir helfen kann, werde ich sehr dankbar . Ich habe es in den letzten 3-4 Tagen versucht, aber ich konnte es nicht schaffen.

Answer 1

Ihre erwartete Ergebnis zu erreichen, haben die Dropdown-Liste anzuzeigen

  <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 ng-hide und ng-Show i verwendet: $ scope.toggle = true; // ng-Show zu steuern und ng-hide Onclick

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

Answer 2

Sie Menu dafür verwenden können.

hier ist das Beispiel.

<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> 

Hier ist das Arbeitsbeispiel. http://codepen.io/next1/pen/PzWZJv

Es wokt auch mit key-board.