ブラウザサイズがスマホサイズになるとメニューを折りたたむjQueryプラグイン「SlickNav」の組み込み

ブラウザサイズがスマホサイズになるとメニューを折りたたむjQueryプラグイン「SlickNav」の組み込み

SlickNavとは、jQueryを使ってメニューを折りたたみ、スマホ用ページを表示する時にメニューコンテンツなどでインターフェイスを整えるスクリプトです。
スマホ用のインターフェイスって、表示させるべきコンテンツと表示させないでもいいコンテンツを選別しなきゃいけませんよね。
メニューはどちらかと言えば、すっきり表示させるだけで幅は取りたくありません。
そんな時に役立つjQueryというところです。

SlickNavの本家サイト内に指定出来るオプション項目がたくさんあります。
当サイト上では、メニューを折りたたみ、ページの上部に固定表示するという仕様で設定しています。
その他細かい設定については本家にてご確認下さい。

SlickNavは本家サイトでそのまま配布してくれていますので、本家サイト内の「DOWNLOAD NOW」をクリックしてダウンロードして下さい。

• SlickNav本家

WEBサイトテンプレート（PHP）に組み込んだファイルをアップしていますので、ダウンロードしてお使い下さい。

phptemp_slicknav_151115.zip

WEBサイトテンプレート（PHP）に組み込んだサンプルページをアップ致しました。

• 組み込み済みサンプルページ（背景あり）
• 組み込み済みサンプルページ（背景なし）

上記のサンプル例の違いですが、大きな違いはありません。
CSS装飾において、背景色の有無の違いだけです。

上記で配布しているWEBサイトテンプート（PHP）は、背景ありの状態で配布しています。
「 slicknav.css 」の背景装飾のみを修正しているだけですので、サンプルをご覧頂き、適宜、修正して下さい。

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. 本家からダウンロードしたファイル（ SlickNav-master.zip ）の中の「 /dist/jquery.slicknav.js 」をjsフォルダに移動させ必要な記述を追記します。
   次にダウンロードしたファイルの中の「 /dist/slicknav.css 」をcssフォルダに移動させ必要な追記をします。
2. htmlソースにjsファイルとcssフィアルを読み込ませ、指定のソースコードを書き込みます。
3. それぞれのファイルをアップします。

ということで、上記の内容を以下で詳細解説致します。

本件で読み込ませるjsファイルは、「 /dist/jquery.slicknav.js 」とjQueryファイルです。
本件では全ページのメニューを折りたたむため、共通ファイルの「 /_set/js.php 」にjsファイルを記述しました。
また、jsファイルの読み込みと同時に必要な記述を追記しています。
追記した内容は以下の通りです。

<script>
$(function(){
	$('#menu').slicknav({
 prependTo: "#mobile-menu",
});
});
</script>

jQueryファイルは当テンプレートでデフォルトで使用しているファイルで問題なかったため、特に追加して読み込ませたりしていません。

次にダウンロードファイル中の「 /dist/slicknav.css 」を読み込ませます。
配布テンプレート内では「 /css/ 」の中に入れました。
配布テンプレート内の「 slicknav.css 」は見やすくするために、若干の修正をしています。

次に「 slicknav.css 」内に「 #mobile-menu 」を追記します。
追記した装飾内容は以下の通りです。

#mobile-menu {
	display: block;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

また、上記の追記以外に必要記述がありますので、ヘッダ内に必要記述を追加します。
追記する必要記述は以下の通りです。

.slicknav_menu { display:none; }

@media screen and (max-width: 768px) {
#menu { display: none; }
.slicknav_menu {
 display:block;
}
}

このCSSの追記に関しては、「 slicknav.css 」内に記述頂いても問題ございません。
配布テンプレートでは、共通ファイルの「 /_set/js.php 」内に記述しています。

「 max-width: 768px 」としていますが、この横幅はタブレット以下のブラウザサイズを想定しています。
ですので、CSSの仕様に併せて適宜修正してください。

「 #mobile-menu 」は、スマホでメニューを表示する時に表示場所を指定するために使う記述です。
配布テンプレート内ではスマホ用メニューを最上段に表示しているため、共通ファイルの「 /_set/head.php 」に書き込みました。
書き込んだhtml記述は以下の通りです。

<div id="mobile-menu"></div>

次に、スマホメニューとして折りたたむメニューの UL タグに「 id="menu" 」を追記します。
配布テンプレート内では、グローバルメニューに当たるメニュー箇所に追記しました。

<div id="globalbg">
<div id="global">
<ul id="menu">
<li id="now"><a href="/">TOP</a></li>
<li><a href="/cate_01/">コンテンツ１</a></li>
<li><a href="/cate_02/">コンテンツ２</a></li>
<li><a href="/cate_03/">コンテンツ３</a></li>
<li><a href="/cate_04/">コンテンツ４</a></li>
</ul>
</div>
</div>

そうしましたら、jsファイル、CSSファイル、htmlファイルをアップして下さい。
まずは上記までの流れのファイルをアップして頂けると、正常に表示します。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_151020.zip 」です。
• SlickNavは全ページに共通するメニューを折りたたむため、404.phpも含め、全てのファイルに各々手配する必要があります。
• 色などの装飾は「 slicknav.css 」内の装飾を修正することで簡単に修正することが出来ます。
• 配布テンプレートではメニューを上部に固定していますが、本家のデフォルト状態ではメニューは固定されていません。
  折りたたんだメニューを上部に固定させない場合は、「 #mobile-menu 」のCSS装飾を消すことで固定ではなくなります。

SlickNavは比較的簡単に組み込めますが、細かい仕様の設定が少々面倒かもしれません。
様々な方がカスタマイズされているので、本家を見ても分からない方は「SlickNav」と検索して調べてみるのもいいかもしれません。

アコーディオンメニューや折りたたみメニューは、様々な方が配布されていますよね。
でも、仕様も設計思想もそれぞれ異なるため、どのようなプログラムだと使い勝手がいいのか分かりませんよね。
私も、いつも迷います（笑）

その中でやはり重要になるのは、テスト環境でのテストに限るような気がします。
テストの段階で躓く場合、バグの問題があったり、ブラウザのサポートの問題であったり、jQueryのバージョンの問題であったり、様々出てきます。
ですので、テストの段階で躓く場合、なるだけ色々試して選びたいところですよね。
今回のSlickNavは、そういう意味では問題なく導入出来たので、是非使ってみて頂きたいところだと思いました。

執筆 : 清水 隼斗