Material 像 google Android 和 You Tube 一样设计精简版导航抽屉

Question

我正在我的网站中使用 Material design lite。他们有很多很好用的模板。我，想改变导航抽屉的一点点设计。这是我用于仪表板的模板

https://getmdl.io/components/index.html#layout-section

在此设计中，导航抽屉与导航栏重叠。我希望设计像 google 官方 android 网站和你管。

这是 android 和你管

的设计

这是我的设计

这是模板的代码。

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

任何人都可以告诉我如何设计像 android 和你管的导航抽屉。

Answer 1

应该这样做：

.mdl-layout--fixed-header>.mdl-layout__header {
  z-index: 6;
}

.has-drawer .mdl-layout__drawer {
  padding-top: 64px;
}

.mdl-layout--fixed-drawer:not(.is-small-screen)>.mdl-layout__header {
  padding-left: 240px;
  margin-left: 0;
  width: 100%;
}

演示：https://codepen.io/andrei-gheorghiu/pen/XZdQpo

注意：可能有一些类，但对我来说，提供 CSS 比搜索文档和示例更容易。最后，问之前先研究应该是你的任务，而不是我的。

干杯！

Material 像 google Android 和 You Tube 一样设计精简版导航抽屉

Material design Lite navigation drawer like google Android and You Tube

html

css

material-design

angular2-mdl