我试图通过一个简单的菜单来实现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"
我该如何解决?
答案 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代码,您会发现加载页面时控制台中出现错误。