CODEWITHSUNDEEP
javascriptcssangularjsmaterial-designangular-material
Milind
Milind

Reputation: 1955

Creating Angular material nav-bar with menu

I am trying to build a website in angularjs with google material design. My codepen url is http://codepen.io/milindsaraswala/pen/yJaYpe

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

I was looking to making a navigation menu for the website, something like this enter image description here

If somebody can help me, I will be very appreciative. I've been trying for the past 3-4 days but haven't been able to make it.

Upvotes: 2

Views: 5237

Answers (2)

nextt1
nextt1

Reputation: 3988

You can use Menu for that.

here is the example.

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

Here is the working example.http://codepen.io/next1/pen/PzWZJv

It is wokting with key-board as well.

Upvotes: 0

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve your expected result , i have used ng-hide and ng-show to show the dropdown list

          <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;//to control ng-show and ng-hide onclick

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

Upvotes: 1

Related Questions