实现CSS框架汉堡包菜单不起作用

时间:2017-11-21 20:36:17

标签: javascript html css materialize

我试图获取在物化网站上运行的移动菜单的汉堡按钮,并且我已经按照文档进行操作,但出于某些原因,当我点击按钮时会发生这种情况:

What it looks like when I tap on mobile

但是,当我全屏显示时,我可以清楚地看到菜单,就像这样。

What it looks like when I expand the screen to maximum width after clicking on desktop

任何人都知道问题是什么?这是我正在使用的代码:

<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="">home</a></li>
<li><a href="">About</a></li>
<li><a href="">services</a></li>
<ul class="side-nav" id="mobile-demo">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
</ul>
        </ul>
    </div>
</nav>

另外,我已经在下面的脚本中初始化了JavaScript,并且它最后加载了。

<script>    
    $(".button-collapse").sideNav();
</script> 

1 个答案:

答案 0 :(得分:0)

我之前项目的摘录

<!-- Navbar START-->
<nav>
  <div class="nav-wrapper bg__secondary">
     <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="#">Home</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Login</a></li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#" class="waves-effect waves-light btn-large">Login</a></li>
    </ul>
  </div>
</nav>
<!-- Navbar END-->

我认为您忘记将$(".button-collapse").sideNav();包含在文档就绪函数

$(document).ready(function() {
  // REQUIRED FOR BUTTON COLLAPSE
  $(".button-collapse").sideNav();
}

我的material-css版本:"materialize-css": "^0.100.2""jquery": "3.2.1"