css - 为什么 Materialize.css 没有按预期工作？

Question

我正在尝试实现一个应该如下所示的 Materialize.css 导航栏:

他们的示例提供了以下 HTML:

<div>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper">
                <a href="#!" class="brand-logo">Logo</a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="sass.html">Sass</a></li>
                    <li><a href="badges.html">Components</a></li>
                </ul>
            </div>
        </nav>
    </div>
</div>

但是在 IE 11 和 Chrome 中它看起来像这样(注意蓝色悬停颜色和下划线，除了下划线是白色外，“ Logo ”文本也一样):

当我缩小窗口时，菜单会完全消失，而不是像他们的示例那样变成左侧的菜单。这是我的样子:

Answer 1

要将您的菜单变成移动设备上的左侧菜单，您必须使用带有移动折叠功能的导航栏 ( http://materializecss.com/navbar.html#mobile-collapse )。

将您的 HTML 标记更改为:

<div>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper">
                <a href="#!" class="brand-logo">Logo</a>
                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="sass.html">Sass</a></li>
                    <li><a href="badges.html">Components</a></li>
                </ul>
                <ul class="side-nav" id="mobile-demo">
                    <li><a href="sass.html">Sass</a></li>
                    <li><a href="badges.html">Components</a></li>
                </ul>
            </div>
        </nav>
    </div>
</div>

并使用这个 jQuery 代码:

$(document).ready(function(){
    $(".button-collapse").sideNav();
});