我在我的网站上使用Material design lite。他们有很多很好的模板。我想改变导航抽屉的一点点设计。这是我用于仪表板的模板
https://getmdl.io/components/index.html#layout-section
在此设计中,导航抽屉与nab条重叠。我希望设计像谷歌官方的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和你管。
答案 0 :(得分:2)
这应该这样做:
.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比通过文档和示例搜索更容易。最后,在问之前进行研究应该是你的任务,而不是我的任务。
干杯!