Bar O Kurniawan Bar O Kurniawan - 20 days ago 17
Javascript Question

How to trigger a mdl-menu using javascript?

Can someone help me how to execute a mdl-menu (Material design lite) using javascript?
I did not find an explanation how to do it on his website.

Html code

<!-- Left aligned menu below button -->
<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>


the screen shot :
enter image description here

Answer

You can use the following command to re-initialize the menu: componentHandler.upgradeDom('MaterialMenu', 'mdl-menu');

According to the source code this: "Searches existing DOM for elements of our component type and upgrades them if they have not already been upgraded."

Comments