Question

我想使用Material Design Lite制作一个菜单，其功能类似于YouTube中的菜单。因此，您可以打开或隐藏菜单，但它不会掩盖标题或使页面变暗（除非您在移动设备上）。我一直在阅读文档，但可以使标题包含菜单抽屉，但是当我单击它时，它掩盖了标题的一部分并使其余内容变暗，或者菜单抽屉被永久卡住在侧面，并稍微阻碍头球。

Youtube with the menu open

Youtube with the menu closed

带有完整标题和扩展绘图的版本

<div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout__title">Fixed drawer layout demo</span>
            <div class="mdl-layout-spacer"></div>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="#">Hello</a>
                <a class="mdl-navigation__link" href="#">World.</a>
                <a class="mdl-navigation__link" href="#">How</a>
                <a class="mdl-navigation__link" href="#">Are</a>
                <a class="mdl-navigation__link" href="#">You?</a>
            </nav>
        </div>
    </header>
    <div class="mdl-layout__drawer" >
        <span class="mdl-layout__title">Material Design Lite</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="#">Hello</a>
            <a class="mdl-navigation__link" href="#">World.</a>
            <a class="mdl-navigation__link" href="#">How</a>
            <a class="mdl-navigation__link" href="#">Are</a>
            <a class="mdl-navigation__link" href="#">You?</a>
        </nav>
    </div>
</div>

对于具有固定抽屉的版本，只需将mdl-layout--fixed-drawer添加到第一个<div>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">

是否可以重新创建youtube在Material Design Lite中制作菜单抽屉的方式？

如何制作可折叠的汉堡菜单，就像YouTube上的菜单一样

0 个答案: