Material Design Lite 菜单
该MDL提供多种CSS类各种预先定义的外观和行为增强适用于摆放各类菜单。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-按钮 标识按钮作为MDL成分，是必需的按钮元素。 |
| 2 | MDL-JS-按钮 设置基本MDL行为按钮，要求按钮元素。 |
| 3 | MDL-按钮-图标 设置图标，按钮，要求按钮元素。 |
| 4 | 材料图标 跨度标识作为材料图标，需要一个内联元素上。 |
| 五 | MDL-菜单 标识无序列表容器作为MDL组成部分，需要ul元素上。 |
| 6 | MDL-JS-菜单 设置基本MDL行为菜单，需要ul元素上。 |
| 7 | MDL-menu__item 标识按钮为MDL菜单选项，并设置基本的MDL行为，在列表项元素必需的。 |
| 8 | MDL-JS-涟漪效应 设置纹波点击选项链接效果可选;无序列表元素必需的。 |
| 9 | MDL-菜单-左上角 上面的设置按钮，菜单位置，校准菜单的左边缘与按钮是可选的;无序列表元素必需的。 |
| 10 | （没有） 缺省情况下，菜单是位于下方按钮，对准与按钮的左边缘。 |
| 11 | MDL-菜单-右上 菜单上方按钮，对齐与按钮，可选择右侧边缘，进入无序列表元素。 |
| 12 | MDL-菜单-右下 菜单位于下面的按钮，对齐与按钮，可选择右侧边缘，进入无序列表元素。 |
例
下面的例子展示了使用MDL-微调类显示不同类型的纺纱。
mdl_menu.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td><td>Top Right Menu</td></tr>
<tr>
<td>
<div class="container mdl-shadow--2dp">
<div class="bar">
<button id="demo_menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">
<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">Item #1</li>
<li class="mdl-menu__item">Item #2</li>
<li disabled class="mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class="background"></div>
</div>
</td>
<td>
<div class="container mdl-shadow--2dp">
<div class="bar">
<div class="wrapper">
<button id="demo_menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo_menu-lower-right">
<li class="mdl-menu__item">Item #1</li>
<li class="mdl-menu__item">Item #2</li>
<li disabled class="mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class="background"></div>
</div>
</td>
<td>
<div class="container mdl-shadow--2dp">
<div class="background"></div>
<div class="bar">
<button id="demo_menu-top-left" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for="demo_menu-top-left">
<li class="mdl-menu__item">Item #1</li>
<li class="mdl-menu__item">Item #2</li>
<li disabled class="mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class="container mdl-shadow--2dp">
<div class="background"></div>
<div class="bar">
<div class="wrapper">
<button id="demo_menu-top-right" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for="demo_menu-top-right">
<li class="mdl-menu__item">Item #1</li>
<li class="mdl-menu__item">Item #2</li>
<li disabled class="mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
结果
验证结果。