在 Materialise 中创建小型导航栏和侧面板 css

Question

我正在为我的新项目使用 materialize css。我有一个我想到的页面的简单模型。这就是我想要的。上方的导航栏和侧面板不应隐藏。

我曾尝试更改 css 的 materialize 以获得侧导航栏，但无济于事。我改变了

@media only screen and (max-width: 992px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

到

@media only screen and (max-width: 2000px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

我也试过更改.js文件，但也没用。我减少了普通导航栏的大小，覆盖了导航的 line-height 属性。是否有可能必须将导航栏放在一起？如果没有，我怎样才能获得侧面板。我只需要侧面板显示 4 个图标，这些图标会有工具提示，点击后会加载一个模式。我尝试使用 materializecss 的网格机制，但无法得到我想要的东西。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您是否尝试过将顶部导航栏与固定侧边栏一起使用？然后您可以设计侧边栏的宽度以获得您想要的大小。

<header>
      <nav class="top-nav">
        <div class="nav-wrapper">
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Log In</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </div>
      </nav>
      <ul style="width:120px; margin-top:65px;" class="side-nav fixed">
        <li><a href="#">Icon 1</a></li>
        <li><a href="#">Icon 2</a></li>
      </ul>      
</header>

在 Materialise 中创建小型导航栏和侧面板 css

Creating Small Navbar and a side panel in Materialize css

css

sidebar

navbar

materialize