Material Design Lite - 菜单

Material Design Lite菜单 - 从简单和简单的步骤学习Material Design Lite，从基本到高级概念，包括概述，环境设置，布局，网格，标签，页脚，徽章，按钮，卡片，进度条，旋转器，菜单，滑块，复选框，单选按钮，图标，开关，数据表，文本字段，工具提示。

MDL提供了一系列CSS类来应用各种预定义的视觉和行为
增强功能并显示不同类型的菜单.下表列出了可用的类及其效果

Sr.No.	Class Name&描述
1	mdl-button 将按钮标识为MDL组件，并且在按钮元素上是必需的.
2	mdl-js-button 将基本MDL行为设置为按钮，并且在按钮元素上是必需的.
3	mdl-button - icon 将图标设置为按钮，并且在按钮元素上是必需的.
4	材料-icons 将范围标识为材料图标，并且在内联元素中是必需的.
5	mdl-menu 标识无序的li st容器作为MDL组件，在ul元素上是必需的.
6	mdl-js-menu 设置基本MDL行为到菜单，在ul元素上是必需的.
7	mdl-menu__item 将按钮标识为MDL菜单选项和集合列表项元素所需的基本MDL行为.
8	mdl-js-ripple-effect 设置涟漪点击效果选项链接，是可选的;在无序列表元素上需要.
9	mdl-menu - 左上角设置按钮上方的菜单位置，菜单的左边缘与按钮对齐，是可选的;在无序列表元素上需要.
10	(无) 默认情况下，菜单位于按钮下方，与左边有按钮.
11	mdl-menu - 右上角菜单位于按钮上方，对齐带有按钮的右边缘，可选，然后是无序列表元素.
12	mdl-menu - bottom-right 菜单位于按钮下方，使用按钮对齐右边缘，可选，然后按无序列表元素.

示例

以下示例将帮助您了解使用 mdl-spinner 类来显示不同类型的微调器.

mdl_menu.htm

                                                                                                                                                                                         Lower Left Menu Lower Right Menu Top Left Menu Top Right Menu
                                                                                  more_vert                                                                  Item #1                        Item #2                        Disabled Item                                                                                                                                                                                                                more_vert                                                                           Item #1                           Item #2                           Disabled Item                                                                                                                                                                                                                      more_vert                                                                  Item #1                        Item #2                        Disabled Item                                                                                                                                                                                                                              more_vert                                                                           Item #1                           Item #2                           Disabled Item

结果

验证结果.

Lower Left Menu	Lower Right Menu	Top Left Menu	Top Right Menu
more_vert Item #1 Item #2 Disabled Item	more_vert Item #1 Item #2 Disabled Item	more_vert Item #1 Item #2 Disabled Item	more_vert Item #1 Item #2 Disabled Item