侧拉菜单/Drawer
侧拉菜单默认情况下是隐藏的,需要用户点击按钮:
可以设置修饰样式类mdl-layout--fixed-drawer来强制显示侧拉菜单(在小尺寸 屏幕下,侧拉菜单总是隐藏的):
<div class="mdl-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">...</div>
</div>
在侧拉菜单中也可以使用导航,这时所有的链接自动按垂直方向排列:
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a href="..." class="mdl-navigation__link">link 1</a>
<a href="..." class="mdl-navigation__link">link 2</a>
</nav>
</div>
配置选项
MDL class | 说明 |
---|---|
mdl-layout__drawer | 声明元素为侧栏菜单/drawer元素 |
mdl-layout-title | 声明元素为标题 |
mdl-navigation | 声明元素为MDL导航组 |
mdl-navigation__link | 声明锚点元素为MDL导航链接 |
mdl-layout--fixed-drawer | 将侧栏菜单/drawer声明为固定式 |
为侧拉菜单增加导航组。