html - MaterializeCSS - 更改固定的 sidenav 将自动显示

Question

我有一个非常正常的 sidenav:

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

<ul class="side-nav fixed" id="slide-out">
...
</ul>

但我希望它只在屏幕超大时自动出现而无需单击菜单项。

如何更改此设置？

谢谢!

Answer 1

使用媒体查询。

这是一个示例:

@media screen and (min-width: 1024px){
  .side-nav .fixed{
    transform: translateX(0px);
  }
}

当您的文档宽度为 1024 像素或更大时，这将使您的导航可见。您可以根据需要更改像素。

参见 this fiddle.

由于导航栏是固定的，您需要更改它的 position 值或将您的页面内容偏移导航宽度。