Material Design Lite โ€“ Menus


Material Design Lite โ€“ Menus : The Material Design Lite(MDL) Menu component is user interface that provides various options and select one of them. The material design menu options have animation effects when you click on it. It also provides functionality to enable and disable the options. Here in this tutorial we are going to explain how you can create different โ€“ different menus in material design lite. You can also use our demo to run and see the output.


Material Design Lite โ€“ Menus

Let us go step by step to learn how to create various types of menus in material design lite.

Lower Left Menu

You can create lower left menu in material design as below โ€“

Material Design Lite โ€“ Lower Left Menu Example:

 <!-- Left aligned menu -->
<button id="dummy-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="dummy-menu-lower-left">
   <li class="mdl-menu__item">Action 1</li>
  <li disabled class="mdl-menu__item">Action 2 Disabled</li>
  <li class="mdl-menu__item">Action 3</li>
</ul>

Try it ยป

If you run the above example it will produce output something like this โ€“

Material Design Lite โ€“ Menus

Lower Right Menu

You can create lower right menu in material design as below โ€“

Material Design Lite โ€“ Lower Right Menu Example:

 <!-- Right aligned menu -->
<button id="dummy-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="dummy-menu-lower-right">
  <li class="mdl-menu__item">Action 1</li>
  <li disabled class="mdl-menu__item">Action 2 Disabled</li>
  <li class="mdl-menu__item">Action 3</li>
</ul>

Try it ยป

If you run the above example it will produce output something like this โ€“

Material Design Lite โ€“ Menus

Top Left Menu

You can create Top Left menu in material design as below โ€“

Material Design Lite โ€“ Top Left Menu Example:

 
<!-- Left aligned menu on top -->
<button id="dummy-menu-top-left"  class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"   data-mdl-for="dummy-menu-top-left">
    <li class="mdl-menu__item">Action 1</li>
  <li disabled class="mdl-menu__item">Action 2 Disabled</li>
  <li class="mdl-menu__item">Action 3</li>
</ul>

Try it ยป

If you run the above example it will produce output something like this โ€“

Material Design Lite โ€“ Top Left Menu Example:

Top Right Menu

You can create top right menu in material design as below โ€“

Material Design Lite โ€“ Top Right Menu Example:

 
<!-- Right aligned menu on top of button  -->
<button id="demo-menu-top-right" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-top-right">
  <li class="mdl-menu__item">Action 1</li>
  <li disabled class="mdl-menu__item">Action 2 Disabled</li>
  <li class="mdl-menu__item">Action 3</li>
</ul>

Try it ยป

If you run the above example it will produce output something like this โ€“

Material Design Lite โ€“ Top Right Menu Example:


Advertisements

Add Comment

๐Ÿ“– Read More