Sidenav 按钮折叠在物化中消失

Question

我制作了一个sidenav，它的折叠按钮位于使用物化框架的导航栏中。如果屏幕分辨率超过 993 像素，折叠按钮开始消失。这是代码

 <div class="nav-wrapper">
        <ul id="slide-out" class="side-nav">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
        <a href="#" class="brand-logo"><img src="Logo.png" width="120"></a>
        <ul id="nav-mobile" class="right">
            <li>
                <a href="#"><img src="work/marker-5.png">Bangkok</a>
            </li>
        </ul>
    </div>
</nav>

我的脚本是这样的

 $(".button-collapse").sideNav({
        menuWidth: 350,
        closeOnClick: true
    });

这是由于具体化框架中的任何媒体查询造成的吗？

Answer 1

如果您删除 button-collapse 类，则菜单将在更宽的屏幕上保持可见。

Answer 2

那是因为物化只在手机和平​​板电脑上使用这个按钮。如果您想将它用于大型设计，您需要像他们在文档中所说的那样将以下类添加到您的菜单项中

全屏 HTML 结构 如果您希望在所有屏幕尺寸上都可以访问菜单，您只需将一个简单的帮助类 show-on-large 添加到 .button-collapse

当你这样做时，代码将保持这种方式。

    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu show-on-large"></i></a>

我实际上也将类从“mdi-navigation-menu”更改为“material-icons”并使用菜单图标。在这种情况下，代码将如下所示：

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

This is the link of the Materialize Documentation

希望对您有所帮助！ :) 在我个人看来，materializeCSS 需要为某些事情提供更具体的文档。

Answer 3

在你的materialize.css文件中，修改如下代码，

 @media only screen and (min-width: 993px) {
   nav a.button-collapse {
     display: none;
   }
 }

到

@media only screen and (min-width: 993px) {
   nav a.button-collapse {
    display: block;
   }
 }