jQueryのドロップダウンメニュー入れた

CSSやjQueryのスマホサイト用メニューをいろいろ試してみましたが、やっとお気に入りのドロップダウンメニューを「簡単！本格的！電子書籍の作り方」公式サイトに設置。
上記サイトはまだ２ページしかないので、サブメニュー入りのドロップダウンメニューである必然性はないのですが・・・。(^^;
jQueryというかJavaScriptもよくわかっていないので、けっこう苦労しました。

基本的にメインＨＰの「町の按摩さん.com」のスマホ専用サイトを作るのが目的でもあり、ドロップダウンメニューでメインメニューが複数個あり、さらにサブメニューが別途複数個開く感じにならないと、我ながら呆れるほど無駄にコンテンツが多くてメニューに収め切れないのです。

ひとまず「町の按摩さん.com」で使えるかどうかを試してみて、使えそうだったので「簡単！本格的！電子書籍の作り方」公式サイトのスマホ専用ページにも採用。
下は「町の按摩さん.com」用のトップページ。
まだメニューとタイトルと画像のみの状態ですが。
メニューの背景色などやサブメニューの行の高さ（行間）は自分好みに変更してあります。

右上「MENU」をタップするとドロップダウンメニューが下りてきます。

「HOME」を含めたメインメニューが現れます。
メインメニューをタップすると、その部のサブメニューが表示。

再度同じメインメニューをタップすればサブメニューがしまい込まれます。

利用したのは「SlickNav」というjQueryプラグイン。
参考にしたのは以下のページ。

・スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」
http://techmemo.biz/javascript/slicknav/

手順は以下の通り。

１．jQueryプラグイン「SlickNav」公式サイトページ右側にある「DOWNLOAD NOW」をクリックして「SlickNav-master.zip」をダウンロード。
　　「SlickNav-master.zip」を解凍し、「dist」フォルダ内の以下のふたつのファイルを設置したいページと同じフォルダに入れます。
　　（場所が指定できればどこに置いてもよいです）
　　・jquery.slicknav.min.js
　　・slicknav.css

２．headタグ内に以下のリンクを記述。（１のふたつのファイルが設置したいページと同じフォルダにある場合）
<link rel="stylesheet" href="slicknav.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.slicknav.min.js"></script>

３．HTMLの（bodyタグ内）メインコンテンツの上にでも以下を記述。
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">メニュー1</a>
<ul class="sub-menu">
  <li><a href="">サブメニュー1</a></li>
  <li><a href="">サブメニュー2</a></li>
</ul>
</li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>

メニューやサブメニューは上記を参考に自分のページに合わせて変えてください。

４．以下のSlickNav呼び出しscriptを</body>直前に記述。
<script>
$(function(){
$('#menu').slicknav();
});
</script>

５．HTMLリスト表示を隠す
これで「SlickNav」の設置は完了なのですが、このままだとドロップダウンメニューとHTMLのリスト表示の両方が表示されるので、以下のコードをCSSファイルかheadタグ内に記述。（以下はheadタグ内に記述した場合）
<style type="text/css">
.slicknav_menu {
display:none;
}
 
@media screen and (max-width: 767px) {
#menu {
display:none;
}
 
.slicknav_menu {
display:block;
}
}
</style>

上記は767px以上の場合はHTMLリスト表示が出てしまい、PCのディスプレイで確認する時にうっとおしいのでディスプレイより大きい数値にしました。

「SlickNav」にはいろいろなオプションも用意されているらしいのですが、個人的にはこれだけで使っています。
デフォルトではサブメニューの行間が狭くてタップしづらいので、行間を標準の1.5倍になるようCSSに追加。
.sub-menu {
line-height:1.5;
}

他に「slicknav.css」をいじって背景色やボタンの色も変えたのですが、どこをいじったのか忘れた。(^^ゞ