在 materialize css 中的何处放置移动导航栏的代码？

Question

我正在尝试使用 MaterializeCSS 创建移动导航栏，但我不明白 post Javascript。

说把这个代码：

 $(".button-collapse").sideNav();

在我的

 $( document ).ready(function(){})

我完全没有使用 Javascript 的经验，所以弄清楚这意味着什么一直很困难，即使使用 google-fu。

这是否在现有 materialize.js 文件中？如果有，在哪里？

here is the code for my navbar

Answer 1

在您的 html 的正文标记中添加此代码后：

<nav>
    <div class="nav-wrapper">
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

Link materialize.css 样式表和相应的 materialize.js 文件。现在，因为你有一个侧面导航，你需要做的就是创建一个新的 js 文件，link 它在你的 html 中并添加此代码：

$(document).ready(function(){
  $('.button-collapse').sideNav();
});

确保 link jQuery 和 materialize.js 之后的脚本。

Answer 2

最好创建另一个 scripts.js 文件并将其放入其中。然后在 body 标签的末尾引用它作为脚本 link 像这样..

<script src="scripts.js"></script>

如果那是您仅有的 JS 代码，您还可以将其内嵌在 HTML 中，例如..

<script>
$( document ).ready(function(){
  $(".button-collapse").sideNav();
})
</script>

无论哪种方式，它都必须遵循 materialize.js 文件。

具体化 SideNav：http://codeply.com/go/iwJMN5S52h

在 materialize css 中的何处放置移动导航栏的代码？

Where to place code for mobile Navbar in materialize css?

html

javascript

css

jquery

materialize