Question

我正在使用Material Design Lite开发Web应用程序。

其中一个要求是：存在侧边栏，默认情况下，它会以较小的宽度（例如50px）显示菜单项的图标。单击菜单（汉堡包）图标，然后将抽屉展开为更大的尺寸，不仅显示图标，还显示旁边的文本。这是我想要实现的一个例子：

默认：

展开：

这是我目前的HTML：

<body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
                <button class="mdl-button mdl-js-button mdl-button--icon">
                    <i class="material-icons">menu</i>
                </button>
                <!-- Add spacer, to align navigation to the right -->
                <div class="mdl-layout-spacer"></div>
                <!-- Navigation. We hide it in small screens. -->
                <button class="mdl-button mdl-js-button mdl-button--icon">
                    <i class="material-icons">apps</i>
                </button>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title"></span>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">
                    <i class="material-icons md-dark">account_circle</i>
                    <span>Account</span>
                </a>
                <a class="mdl-navigation__link" href="">
                    <i class="material-icons md-dark">home</i>
                    <span>Home</span>
                </a>
                <a class="mdl-navigation__link" href="">
                    <i class="material-icons md-dark">assignment</i>
                    <span>Reports</span>
                </a>
                <a class="mdl-navigation__link" href="">
                    <i class="material-icons md-dark">input</i>
                    <span>Logout</span>
                </a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <div class="page-content">
                <!-- Your content goes here -->
                @RenderBody()
            </div>
        </main>
    </div>
</body>

这样做有好/正确的方法吗？我想知道如何做到这一点，并没有找到一个好的解决方案。

Answer 1

看看this answer。我认为这是实现这种效果的好方法。

然后你可以放入polyfill并在你的CSS中写下：

.mdl-navigation .material-icons {
    opacity: 0;
    transition: 250ms opacity ease-in-out;
}

.mdl-navigation[min-width~="200px"] .material-icons {
    opacity: 1;
}

如果您认为polyfill太多而无法添加此功能，我可以想到另一种不使用任何javascript的方式，但是对于如何设置显示/隐藏的动画，它不会那么灵活你想要动画它。它涉及在抽屉上重叠主要内容区域。给我一点时间，我会模拟一个演示。

修改

这就是我一直在想的非js方法（仍需要一些用于切换is-expanded类）：https://jsfiddle.net/damo_s/27u4huzf/2/

.mdl-layout__drawer { transform: translateX(0); z-index: 1; box-shadow: none; border-right: 0; &.is-expanded { + .mdl-layout__header { margin-left: 240px!important; &:before { width: 0; left: 200px; } } ~ .mdl-layout__content { margin-left: 240px!important; &:before { width: 0; left: 200px; } } } } .mdl-layout__header, .mdl-layout__content { margin-left: 55px!important; } .mdl-layout__header { z-index: 2; &:before { background: #fff; content: ''; display: block; position: absolute; width: 15px; height: 100%; left: 40px; } } .mdl-layout__header-row { padding: 0 16px 0 22px; } .mdl-layout__content { background: #878787; } .mdl-layout__drawer-button { display: none; } .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover { background-color: transparent; }

现在看一下，我不认为这是一个非常好的方法（出于多种原因你可能会注意到它），但我会留在这里以防万一有人希望改进它

编辑2

我修改了上一个演示以简化它并允许打开/关闭动画。我不知道在这一点上你是否完全按照“材料”的方式做事，但我认为它比我以前的尝试更可行和更好。演示：https://jsfiddle.net/damo_s/Ln6e4qLt/

.mdl-layout__drawer { overflow: hidden; width: 55px; transform: translateX(0); transition: 250ms width ease-in-out; .mdl-navigation__link span { opacity: 0; transition: 250ms opacity ease-in-out; } + .mdl-layout__header, ~ .mdl-layout__content { transition: 250ms margin-left ease-in-out; } &.is-expanded { width: 240px; .mdl-navigation__link span { opacity: 1; } + .mdl-layout__header, ~ .mdl-layout__content{ margin-left: 240px!important; } } } .mdl-layout__header, .mdl-layout__content { margin-left: 55px!important; } .mdl-navigation { width: 240px; } .mdl-layout__header-row { padding: 0 16px 0 22px; } .mdl-layout__content { background: #878787; } .mdl-layout__drawer-button { display: none; }

Answer 2

纯CSS无法做到这一点。你必须使用jQuery。像这样的东西

macro_rules! mtc {
    ( ident $ident:ident ) => ("ident");
    ( expr $string:expr ) => ("string");
}

假设您通过display：none。

隐藏了链接

如果你可以在这里发布你的css和html代码，我可以提供具体的例子。

材料设计可扩展抽屉

2 个答案: