Material Design lite Menu
what is menu in (MDL) ?
- Material Design Lite(MDL) component menu component is used to create an user interface to enable users to select multiple options
- The result of the selection initiates a change of setting, or other visual effects.
- There must be atleast two or more selectable options in a menu.
- The Purpose of a menu is to get the user to select from a set of options, and is dismissed when a selection is made.The menu options can also be programmed to enable or disable an option based on requirement.
- The Design , usage and placement of the menu has a very significant effect
Material Design Lite(MDL) : Bottom-left and Bottom-right Aligned Menus
- A MDL Menu us created using class mdl-menu to create a container to hold menu items.
- To Align the Menu along bottom-Left side use class mdl-menu--bottom-left.
- To Align the Menu along bottom-right side use class mdl-menu--bottom-right.
Sample Code: Menu Aligned bottom-left and bottom-right
<!-- MDL lower Left Aligned Menu Button-->
<button id="my-menu-lower-left"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">share</i>
</button>
<!-- Menu Items List , mdl-menu--botton-right -->
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="my-menu-lower-left">
<li class="mdl-menu__item">Facebook</li>
<li class="mdl-menu__item">Twitter</li>
<li disabled class="mdl-menu__item">Google Plus</li>
</ul>
<!-- MDL bottom right Aligned Menu Button -->
<button id="my-menu-bottom-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">share</i>
</button>
<!-- Menu items List , mdl-menu--bottom-right -->
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="my-menu-bottom-right">
<li class="mdl-menu__item">Facebook</li>
<li class="mdl-menu__item">Twitter</li>
<li disabled class="mdl-menu__item">Google Plus</li>
</ul>
Note:Based on the Requirement, users can use any material icons or even images
Material Design Lite(MDL) Menu : Aligned Lower-Left and Top-Right
- To Align the Menu along top-Left side use class mdl-menu--top-left.
- To Align the Menu along top-right side use class mdl-menu--top-right.
Sample Code: Menu Aligned Lower-Left and Top-Right
Button -->
<button id="my-menu-top-left"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">alarm</i>
</button>
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for="my-menu-top-left">
<li class="mdl-menu__item">Set Alarm</li>
<li class="mdl-menu__item">Remove Alarm</li>
<li disabled class="mdl-menu__item">Snooze</li>
</ul>
<!-- MDL Menu , top-right aligned button -->
<button id="my-menu-top-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">alarm</i>
</button>
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for="my-menu-top-right">
<li class="mdl-menu__item">Set Alarm</li>
<li class="mdl-menu__item">Remove Alarm</li>
<li disabled class="mdl-menu__item">Snooze</li>
</ul>
Note: A Primary theme color is selected as the color of the spinner.
Material Design Lite : Menus
| MDL Class | Description |
|---|---|
| mdl-button | To create a container for progress bar. |
| mdl-button--icon | To assign MDL behaviour to progress bar component |
| material-icons | To apply animation effect to MDL progress bar. |
| mdl-menu | To Create a Container for MDL Menu Component. |
| mdl-js-menu | To Assign MDL behaviour to the menu bar |
| mdl-menu__item | To Define each mdl option on the menu popup. |
| mdl-js-ripple-effect | To apply a ripple effect to the option links within the menu |
| mdl-menu--top-left | To position the menu above the button, and aligns the left edge of the menu with the button |
| mdl-menu--bottom-left | To position the menu below the button, and aligns the left edge of the menu with the button |
| mdl-menu--top-right | To position the menu above the button, and aligns the right edge of the menu with the button |
| mdl-menu-bottom-right | To position the menu below the button, and aligns the right edge of the menu with the button |