CODEWITHSUNDEEP
htmlcssangularjs
torbenrudgaard
torbenrudgaard

Reputation: 2561

Building a vertical menu using md-menu and material icons

Im trying to use md-menu to create a vertical menu and use the material icons.

But all I get is a horizontal menu, and the icons are not aligned and will not work when I put them into <md-icon md-svg-icon="hotel" md-menu-align-target></md-icon>

Here is my code.

<md-menu md-position-mode="target-right target" class="">

    <md-button aria-label="" class="md-icon-button" ng-click="$mdMenu.open()">
        <img src="../img/Menu.png" alt="Menu">
    </md-button>

    <md-menu-content width="2">
    <md-menu-item>
        <md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
        <md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
        <md-menu-divider></md-menu-divider>
        <md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
        <md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
    </md-menu-item>
    </md-menu-content>

</md-menu>

On top is what I want, and below is what my current code looks like:

enter image description here

FIRST PROBLEM Getting the menu to be vertical and positioning it under my arrow button.

SECOND PROBLEM Getting the icons to appear like they do in the angular examples that I tried.

I tried making the buttons like this:

<md-button ui-sref="book">
    <md-icon md-svg-icon="hotel" md-menu-align-target></md-icon>
    Booking
</md-button>

But then I get no icons.

Upvotes: 0

Views: 706

Answers (1)

Fetrarij
Fetrarij

Reputation: 7326

You are not using the right html structure, md-menu-item should contains each menu item, should be:

  <md-menu-item>
      <md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
 </md-menu-item>
 <md-menu-item>
      <md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
 </md-menu-item>
       ...

Upvotes: 1

Related Questions