Material Design Lite 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

侧拉菜单/Drawer

侧拉菜单默认情况下是隐藏的,需要用户点击按钮:

mdl-layout__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声明为固定式
为侧拉菜单增加导航组。