0

我制作了一个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
    });

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

4

3 回答 3

1

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

于 2015-07-16T19:29:54.763 回答
0

在您的 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;
   }
 }
于 2017-01-04T19:28:49.280 回答
0

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

全屏 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>

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

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

这是 Materialise 文档的链接

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

于 2016-07-14T16:13:51.190 回答