【问题标题】:Material design Lite navigation drawer like google Android and You TubeMaterial design Lite 导航抽屉,如 google Android 和 You Tube
【发布时间】:2023-10-29 00:24:01
【问题描述】:

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

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

在此设计中,导航抽屉与导航栏重叠。我希望设计像谷歌官方安卓网站和你管。

这是安卓和你管的设计

这是我的设计

这是模板的代码。

<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和you tube这样的导航抽屉。

【问题讨论】:

    标签: css html material-design angular2-mdl


    【解决方案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 比搜索文档和示例更容易。最后,在询问之前进行研究应该是你的任务,而不是我的任务。

    干杯!

    【讨论】:

    • 感谢您的回答,它有效。我试图找到默认情况下抽屉保持打开的类。但在任何地方都找不到。你能告诉我怎么打开抽屉吗?我知道有固定抽屉的 mdl-layout--fixed-drawer 类。但我不想修复第一次加载时打开的抽屉。
    • @San:首次加载时打开只能使用 JavaScript(因为打开本身发生在 JS 中):将一个类添加到抽屉中,并将一个混淆器元素添加到 &lt;main&gt;。我使用(注释)功能更新了笔,该功能可用于在加载时打开栏。它只是在页面加载时“点击”按钮。