Question

我已使用materialize框架创建了sidenav并且其折叠按钮位于导航栏中。如果屏幕分辨率超过993px，则折叠按钮开始消失。这是代码

 <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结构 如果你想在所有屏幕尺寸上访问菜单，你只需要在.button-collapse
上添加一个简单的帮助类show-on-large。

当你这样做时，代码将保持这种状态。

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

我实际上也改变了＆＃34; mdi-navigation-menu＆＃34;到＆＃34;材料图标＆＃34;并使用菜单图标。在这种情况下，代码将如下所示：

    <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;
   }
 }

实际上，Sidenav按钮折叠消失

3 个答案: