![](/img/trans.png)
[英]Display a different side-nav on a different page using materialize css
[英]Materialize CSS side-nav not working
我有一个Materialise运行的基本设置,一切似乎都很好,除了滑出侧导航。
这是我的代码。 菜单:
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
<li><a class="modal-trigger" href="#signup">Signup</a></li>
<li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>
<ul id="slide-out" class="side-nav">
<li><a href="#">About</a></li>
<li><a href="#">Signup</a></li>
<li><a href="#">Sign In</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
JS:
<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
$('.modal-trigger').leanModal();
});
</script>
在缩小屏幕尺寸时,我会获得适当的汉堡包菜单,但是,单击汉堡包不会扩展菜单。 URL使用哈希#进行更新,就是这样。 我的JS输出中没有报告错误。
使用其他JS函数,下拉菜单工作,模态工作。 难以为什么sideNav先生不合作。
有任何想法吗?
我找到了解决方案。 我从Materialize中获取了init hack: http : //materializecss.com/templates/starter-template/js/init.js然后确保它最后一次在我的JS中调用。 (将它放在JS的其余部分之前会导致它失败。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.