5

I am using Material 2 to create a menu. I have a md-button trigger that opens a md-menu. I want the button to open on hover. I know that the Material Angular.io is still pretty new. I have googled the problem but I just come up with Angularjs results. Can anyone point me in the right direction?

Here is a sample of my html:

    <button md-button [mdMenuTriggerFor]="userMenu" class="nav-btn" ><i class="fa fa-user" aria-hidden="true" id="user-icon"></i> NAME</button>
    <md-menu #userMenu="mdMenu" xPosition="before" yPosition="below" [overlapTrigger]="false">
        <button md-menu-item class="nav-dropdown" [routerLink]="['/dashboard']">DASHBOARD</button>
        <button md-menu-item class="nav-dropdown">MY PROFILE</button>
        <button md-menu-item class="nav-dropdown">lOGOUT</button>
    </md-menu>
Nehal
  • 13,130
  • 4
  • 43
  • 59
Jason_Sunday
  • 55
  • 1
  • 6

1 Answers1

10

You can do it by manually triggering the openMenu() method on mouseenter.

Example:

<button md-icon-button 
        [md-menu-trigger-for]="menu" 
        #menuTrigger="mdMenuTrigger" 
        (mouseenter)="menuTrigger.openMenu()"
        style="margin-right: 25px">
  <md-icon>more_vert</md-icon>Menu 1
</button>

<md-menu #menu="mdMenu">
  <button md-menu-item>
    <md-icon>dialpad</md-icon>
    <span>Redial</span>
  </button>
  <button md-menu-item disabled>
    <md-icon>voicemail</md-icon>
    <span>Check voicemail</span>
  </button>
  <button md-menu-item>
    <md-icon>notifications_off</md-icon>
    <span>Disable alerts</span>
  </button>
</md-menu>

Plunker demo

For your code, it would be:

<button md-button #menuTrigger="mdMenuTrigger" 
                  (mouseenter)="menuTrigger.openMenu()"
                  [mdMenuTriggerFor]="userMenu" 
                  class="nav-btn" >
  <i class="fa fa-user" aria-hidden="true" id="user-icon"></i> 
  NAME
</button>
Nehal
  • 13,130
  • 4
  • 43
  • 59
  • How would you use this to enable a developer to have multiple menus? If I can copy and paste your code twice, on hover it always enables the same menu? – danivicario Sep 27 '17 at 14:01
  • The solution doesn't work well when the menu is forced to not overlap the trigger using `[overlapTrigger]="false"` attribute. In this case, the parent menu button is visible, so: 1) it loses focus on `mouse hover`, as it moves to the first sub-item; 2) it allows clicks, which re-play the opening animation – Alex Klaus Oct 03 '17 at 01:06
  • 5
    Thanks @Nehal. This works. But on the mouse out I need to close the current menu and then open up the next menu if its hovered on. Any insights on it. Currently on the mouse over of the first menu - opens up but I had to select any 1 menu item or click some where to dismiss the backdrop div. This spoils the actual requirement. – Mani Oct 10 '17 at 12:00
  • The link is broken @Nehal – Carmoreno Apr 24 '18 at 21:19