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

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

コラム

今回のjQueryプラグインの紹介は「SlickNav」です。
当サイトのテンプレートのレスポンシブ対応でスマホ用CSSに切り替えた時、メニューはそのまま表示しています。
しかし、スマホ用CSSの時に切り替わった時にメニューが折りたたみになると便利かもしれません。
ということで、メニューを折りたたみになるようなjQueryを組み込みました。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

SlickNavサイトイメージ
SlickNavとは?
SlickNavとはメニューリンクを折りたたむスクリプト

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

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

SlickNavの本家サイトと配布

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

ダウンロードと組み込みサンプル
SlickNav組み込み済みファイルのダウンロード

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

phptemp_slicknav_151115.zip
組み込み済みサンプル

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

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

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

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

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

SlickNavファイルの移動とjQueryファイルの指定

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

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

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

CSSファイルの設定と必要記述の追記

次にダウンロードファイル中の「 /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の仕様に併せて適宜修正してください。

htmlソースに指定のソース記述

「 #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/">コンテンツ1</a></li>
<li><a href="/cate_02/">コンテンツ2</a></li>
<li><a href="/cate_03/">コンテンツ3</a></li>
<li><a href="/cate_04/">コンテンツ4</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は、そういう意味では問題なく導入出来たので、是非使ってみて頂きたいところだと思いました。

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP