Materialize

Question

我正在尝试让一个侧边菜单在 Materialise 上工作，这应该非常简单：

首先我将 sidenav 内容添加到页面：

<ul id="slide-out" class="sidenav">
<li><div class="user-view">
  <div class="background">
    <img src="images/office.jpg">
  </div>
  <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
  <a href="#name"><span class="white-text name">John Doe</span></a>
  <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>

然后我添加 jquery 代码：

$( document ).ready(function() {
 $('.sidenav').sidenav();
});

最后是问题所在的部分：

我有一个位于页面顶部的导航：

<nav>
<div class="nav-wrapper">
  <a href="#" class="brand-logo" data-target="slide-out" class="sidenav-trigger"><img src="icon.png" alt="" /></a>

  <ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
    <li><a href="#" data-target="slide-out" class="sidenav-trigger">Trigger SideNav</a></li><!-- This is just not showing -->
  </ul>

</div>
</nav>

出于某种原因，此菜单未显示：

 <li><a href="#" data-target="slide-out" class="sidenav-trigger">Trigger SideNav</a></li>

除非我把它取下来...data-target="slide-out" class="sidenav-trigger"

我该如何解决这个问题？

Answer 1

据我所知，这不是问题，当浏览器的宽度小于 993px 时，将显示具有 sidenav-trigger class 的元素。只需将浏览器 window 宽度调整为小于 993px 即可查看结果。

如果不起作用：

我认为问题可能出在您 link 的内容上。用文字替换图片，然后重试。

Answer 2

除了 Moein 所说的（sidenav-trigger 菜单仅在页面宽度小于 993px 时出现），您可以添加 show-on-large class 到您的菜单按钮。

类似于：

    <nav>
        <div class="nav-wrapper">
            <a href="#" data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons">menu</i></a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#" data-target="slide-out">Menu</a></li>
                <li><a href="">Info</a></li>
            </ul>
        </div>
    </nav>

Answer 3

出于名誉原因，我不能发表评论。它适用于 javascript 代码

document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {});
});

您必须更改这段代码，而不是官方文档中给出的代码

M.Sidenav.init(elems, options);

有了这个

M.Sidenav.init(elems, {});

使用官方 javascript 代码，您会注意到在加载页面时控制台中出现错误。

Materialize - 就像那样触发 sidenav 消失

Materialize - Like that triggers sidenav disappears

css