Material Design Lite Menus - Material Design Lite

Why Material Design Lite Menus are useful?

The MDL menus supports different types of CSS classes to apply various predefined visual and behavioral enhancements to the display various types of menu. Following example showcases various types of classes and their effects.
S.N.
Class Name & Description
1
mdl-button
Identifies button as an MDL component and is required on button element.
2
mdl-js-button
Sets basic MDL behavior to button and is required on button element.
3
mdl-button--icon
Sets icon to button and is required on button element.
4
material-icons
Identifies span as a material icon and is required on an inline element.
5
mdl-menu
Identifies an unordered list container as an MDL component and is required on ul element.
6
mdl-js-menu
Sets basic MDL behavior to menu and is required on ul element.
7
mdl-menu__item
Identifies buttons as MDL menu options and sets basic MDL behavior, required on list item elements.
8
mdl-js-ripple-effect
Sets ripple click effect to option links and is optional; required on unordered list element.
9
mdl-menu--top-left
Set the menu position above button, aligns left edge of menu with button and is optional; required on unordered list element.
10
(none)
By default, menu is positioned below button, aligns to the left edge with button.
11
mdl-menu--top-right
menu is positioned above button, aligns to the right edge with button, optional and goes on unordered list element.
12
mdl-menu--bottom-right
menu is positioned below button, aligns to the right edge with button, optional and goes on unordered list element.

Example

Below mentioned example explains about the use of mdl-spinner classes to showcase different types of spinners.
mdl_menu.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics