jQuery レスポンシブメニュープラグイン SlickNav の使い方について

Question

jQuery レスポンシブメニュープラグイン SlickNavを利用してハンバーガーメニュを実装しようとしております。

しっかりjsファイルを読み込ませているのですが
下記のようにSlickNavを呼び出そうとしたところ「.slicknav is not a function」
となってしまいます。
何がいけないのでしょうか。

jsの読み込み
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>


メニューの設置
<ul id="menu" class="clearfix">
      <li><a href="#">Home</a></li>
      <li><a href="#">Works</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
</ul>

$(function(){
$('#menu').slicknav();
});
</script>

宜しくお願いします。

Comments

[kei344]

「読み込ませている」部分のHTMLを質問文に追記ください。

[kakkydayo]

返信ありがとうございます。只今、html部分を追記致しました。宜しくお願い致します。

[kei344]

追加されたのはメニュー部分ですが、「jsファイルを読み込ませている」というのはどの部分でしょうか。

[kakkydayo]

「jsファイルを読み込ませている」部分を追記致しました。宜しくお願い致します。

Answer 1

下記のように指定されていますが、タグから察するにWordpressをお使いのようなので、フルパスで指定しないと動かないページが多いと思います。

<script src="js/jquery.slicknav.min.js"></script>

下記のようにしてみて動いた場合パスの問題だと思います。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/slicknav.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js"></script>

Comments

[kakkydayo]

ご解答ありがとうございます。大変助かりました。
また質問ばかりで大変申し訳ありませんが、エラーは消えたのですが、メニューバーがヘッダーに表示されず「Home」や「Works」の文言が表示されている状況です。
これでハンバーガーメニューが実装できると思ったのですが、上記以外にコードを記述する必要はありますでしょうか。

[kei344]

> メニューバーがヘッダーに表示されず
ヘッダーに表示させることまではライブラリで行われないと思います。ご自身でCSSで設定する必要があるでしょう。

また、ウインドウ幅が広い状態ではハンバーガーメニューにはならない仕様ではないでしょうか。

[kakkydayo]

ダウンロードしたCSS+下記のコードをcssに記載しておりますが、ハンバーガーメニューが768px以下にしても表示されず、ウインドウ幅を広くしてもヘッダーに文言が表示されております。
助けてください。お願いします。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
@media screen and (max-width: 768px) {
.js #menu {
display:none;
}
.js .slicknav_menu {
display:block;
}
}

[kei344]

> 助けてください。お願いします。
自分のコードは自分で直すしかないことを学びましょう。

公式のサンプルは modernizr.js を使うことを前提に書かれているので、コメント欄のコードに関して言えば「.js」を削除してみてください。

デベロッパーツールを使ってどのようになっているかを確認しながらコードを修正してみてください。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/