Creating Angular material nav-bar with menu

Question

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

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.

@nextt1 My code pen is working. This my url http://codepen.io/milindsaraswala/pen/yJaYpe I check myself in different browser — Milind, Jun 24 '16 at 05:06
You basically want to create a dropdown menu for navigation right ? — nextt1, Jun 24 '16 at 05:09

score 1 · Answer 1 · answered Jun 17 '16 at 21:41

1

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

answered Jun 17 '16 at 21:41

Naga Sai A

10,771
1
21
40

I didnt apply styling to that dropdown menu and this works for single dropdown menu for long list.Hope this works for you :) – Naga Sai A Jun 17 '16 at 21:43
Can we do mouse over as well as click – Milind Jun 17 '16 at 21:47
Updated codepen ng-click="toggle=!toggle" ng-mouseover="toggle=!toggle" – Naga Sai A Jun 17 '16 at 21:50
now works for both mouse over and click ... hope this works for you :) – Naga Sai A Jun 17 '16 at 21:51
Thank you very much but can we remove grid line. Sorry I am asking lot :( – Milind Jun 17 '16 at 21:54
Thank you very much for that. but sub-menu disappear before I put my mouse – Milind Jun 17 '16 at 23:41
also it don't work with tab, I mean for accessibility – Milind Jun 17 '16 at 23:47
you mean menu or tabs ?sorry I didnt get last comment – Naga Sai A Jun 17 '16 at 23:51
Thing is that website should be accessibility that means it should work with keyboard with tab, enter etc... I think rather to rework whole thing I should use some css3 menu – Milind Jun 17 '16 at 23:54
submenu disappear due to ng-mouse hover option....i need to tweak it to work ... Use CSS3 for mouse over alone to fix it :) ...for tab accessibility i need to check ...only these two are pending for now right :) – Naga Sai A Jun 17 '16 at 23:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114981/discussion-between-milind-and-naga-sai-a). – Milind Jun 17 '16 at 23:59

score 0 · Answer 2 · answered Jun 24 '16 at 05:14

0

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.

answered Jun 24 '16 at 05:14

nextt1

3,858
2
18
26

Thanks for your effort but it don't looks like menu and menu position should be under the menu header text – Milind Jun 24 '16 at 05:17
Well Official Docs calls it `menu`. You can use `md-offset` attribute on `md-menu` to set the desired offset. please refer to offical Docs once. I updated the codepen. So check that out too. – nextt1 Jun 24 '16 at 05:23
Yea, I know that official document calls it as menu but it don't looks like menu and that is the reason I came over here to get help from you guys – Milind Jun 24 '16 at 05:25

Creating Angular material nav-bar with menu

2 Answers2