マウスのホバー上でマテリアルデザインメニューを開く方法

Question

私は、マテリアルデザインライトを使用してメニューを作成しています。アイコンをクリックするとメニューが開きます。しかし、私はここで

を置くマウスでメニューを開く必要があり、メニュー

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
 
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 

 
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon"> 
 
     <i class="material-icons">more_vert</i> 
 
    </button> 
 

 
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left"> 
 
    <li class="mdl-menu__item">Some Action</li> 
 
    <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> 
 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
 
    <li class="mdl-menu__item">Yet Another Action</li> 
 
</ul>

のコードはまた、誰もが私はのようにメガメニューを作成する方法を知らせることができますですこのlinkを使用材料設計Lite

Answer 1

メニューのクリックイベントは既に書かれていますので、あなたはマウスオーバーで同じイベントを使用することができます。更新されたボタン要素を参照してください。 JavaScriptの関数へ

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
 
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 

 
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon" onmouseover="this.click()" onmouseout="this.click()"> 
 
     <i class="material-icons">more_vert</i> 
 
    </button> 
 

 
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left"> 
 
    <li class="mdl-menu__item">Some Action</li> 
 
    <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> 
 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
 
    <li class="mdl-menu__item">Yet Another Action</li> 
 
</ul>

移動し、マウスオーバーとアウトイベントより多くのコントロールを取得します。

注：私はUI開発者ではないため、最適なソリューションではない可能性があります。