实现-像这样触发Sidenav消失

时间:2018-07-06 18:56:07

标签: css materialize

我试图通过一个简单的菜单来实现Materialize,这应该很简单:

首先,我将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"

我该如何解决?

3 个答案:

答案 0 :(得分:1)

除了Moein所说的(仅当页面宽度小于993px时才会出现sidenav-trigger菜单),您还可以通过将show-on-large类添加到菜单按钮来使它看起来完全一样。

类似的东西:

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

答案 1 :(得分:0)

我知道这不是问题,当浏览器的宽度小于993px时,将显示具有sidenav-trigger类的元素。只需将浏览器窗口的宽度调整为小于993px,然后查看结果即可。

如果它不起作用:

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

答案 2 :(得分:0)

出于声誉原因,不允许我发表评论。它将与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代码,您会发现加载页面时控制台中出现错误。