材料設計可擴展抽屜

我正在使用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>

是否有一個良好/正確這樣做的方式？我想知道如何做到這一點，並沒有提出一個好的解決方案。

來源

2016-04-23 arazzy

看看this answer。我認爲這是一個很好的方法來達到這個效果。

然後，您可以只下降的填充工具，在你的CSS是這樣寫的：

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

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

如果你認爲一個填充工具是太多隻添加這個功能我能想到的，沒有按」一個別的辦法不要使用任何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; 
}

來源

2016-04-23 15:31:22

我喜歡這種方法。這將是很好，如果抽屜展開/摺疊仍然動畫雖然 – arazzy

嗨，請參閱我的第二編輯:) –

工程太棒了！非常感謝 – arazzy

這不能由純CSS完成。你必須使用jQuery。像這樣的東西

$('#hamburger-button').on('click',function() { 
    $('#menu .links').css('display','block'); 

});

假設你有隱藏的鏈接顯示：無。

如果你可以在這裏發表你的CSS和HTML代碼，我可以幫助具體的例子。

來源

2016-04-23 15:06:50 iamwtk

謝謝，加入我的HTML到我的職位，不還沒有超過材料設計精簡版的樣式表 – arazzy

我檢查了材料設計精簡版，整個抽屜通過他們的js文件管理的其他任何CSS，因爲它隱藏在較小的屏幕上等等。因此，它需要在整個框架中真正深入削減。 – iamwtk

材料設計可擴展抽屜

回答

相關問題