どこでモバイル化Navbarのコードをmaterialize cssに配置しますか？

Question

MaterializeCSSを使用してモバイルNav-Barを作成しようとしていますが、Javascriptをどこに投稿するのか分かりません。

The bottom of this page

このコードを配置すると言う：私の

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

で

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

私はこの手段は闘争となっているものを考え出す、全くJavaScriptでの経験がありません、google-fuであっても。

これは既存のmaterialize.jsファイル内にありますか？もしそうなら、どこ？あなたのhtmlのbodyタグにこのコードを追加した後

here is the code for my navbar

Answer 1

別のscripts.jsファイルを作成してそこに配置するのが最適でしょう。それはあなたが持っている唯一のJSコードあなたもHTMLのようにインラインでそれを含めることができますがあります場合は、.. ..このようなスクリプトリンクなどbodyタグの終わりに

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

をそれを参照

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

いずれにせよ、それはmaterialize.jsファイルに従わなければなりません。

マテリアライズSideNav：http://codeply.com/go/iwJMN5S52h

Answer 2

：

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

はmaterialize.cssスタイルシートと対応materialize.jsファイルをリンクします。

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

jQueryとmaterialize.js後にスクリプトをリンクするようにしてください：あなたはサイドナビゲーションを持っているので、今、あなたがする必要があるのは、新しいJSファイルを作成し、あなたのhtmlの中でそれをリンクして、このコードを追加しています。