【レスポンシブ対応】スマホ用メニューを実装できるjQueryプラグインSlickNavの使い方

先日のgoogleのウェブマスター向け公式ブログの記事です。

モバイル専用サイトからレスポンシブ サイトに移行する方法

レスポンシブ ウェブ デザインを導入するサイトが増えるにつれて、ウェブマスターの方々の間で、モバイル用に別途設定する URL（英語）からレスポンシブ ウェブ デザインの利用に移行することへの関心が高まっています。… 引用元:ウェブマスター向け公式ブログ

弊社でも既存のPCサイトをレスポンシブ化するというご依頼を昨今たくさんいただいております。

そこで今回はナビゲーションのレスポンシブ化に焦点を当てて、とっても簡単に実装出来るjqueryプラグインSlickNavの使い方をご紹介します。
オプション解説や、slicknavのオプションにはない閉じるボタンの実装方法も紹介しているので、是非チェックしてみてください。

SlickNavのいいところ

というわけでこのプラグインには日頃からとってもお世話になっています。
大抵のレスポンシブ化案件の場合は、モバイルを意識して作成したPCサイトではないので、 レスポンシブ化する上で構造であったりstyleと言った面で都合の悪い事が憑き物です。
しかしこのプラグインがあれば大抵のナビゲーションもきちんとレスポンシブ化させられます。
では、早速実装方法をみていきましょう。

レスポンシブ化ってなんだっけ？という方は以下の記事を参考にしてみて下さい。

本当に簡単！SlickNavの実装方法

まずは1番基本の状態です。DEMOも合わせてご覧ください

DEMOページ

プラグインSlickNavをダウンロードする

http://slicknav.com/

 

必要なファイルは
・jquery.slicknav.min.js
・slicknav.css
以上2つです。

プラグインSlickNavを読み込む

<link rel="stylesheet" href="css/slicknav.css"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-1.11.3.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.slicknav.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />

基本の使い方

<ul id="gnav">
　<li><a href="">Home</a></li>
　<li><a href="">Menu 1</a></li>
　<li><a href="">Menu 2</a></li>
　<li><a href="">Menu 3</a></li>
　<li><a href="">About</a></li>
　<li><a href="">Contact</a></li>
</ul>

.slicknav_menu {
 display:none;/*PC時は非表示*/
}
@media screen and (max-width: 600px) {
 #gnav {
 display:none;/*モバイル時は非表示*/
}
 .slicknav_menu {
 display:block;/*モバイル時は表示*/}
}

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20jQuery(function(%24)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24('%23gnav').slicknav()%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />

これだけです。
DEMOをブラウザの検証でチェックしていただくとわかりやすいのですが、
jsでメニューを囲っているタグを指定すれば、その部分でマルっと.slicknav_menuを生成してくれます。
あとは、PC時には#gnavを表示し、モバイル時は.slicknav_menuを表示するようにcssに記述すれば、
ブレイクポイントで切り替わるという仕組みです。

SlickNavのオプションをDEMOと合わせて解説

SlickNavにはいくつかオプションがありますが、その中でも使いやすいものをピックアップし、説明と、DEMOを用意しました。

オプション表

プロパティー	Default	説明
label	“MENU”	メニューボタンのラベル名が指定できます。 “メニュー”の場合・・・DEMO2 “”空の場合・・・DEMO3
duration	200	スライドアニメーションの継続時間を調整出来ます。
easingOpen	“swing”	メニューをを開く時のアニメーション設定です。 jQuery UIなどのプラグインを併用する事でより多くのイージング関数が使えます。 わかりやすいEasingの早見表がありましたので色々なパターンを試してください。 “easeOutBounce”の場合・・・DEMO3
easingClose	“swing”	メニューをを閉じる時のアニメーション設定です。 jQuery UIなどのプラグインを併用する事でより多くのイージング関数が使えます。 わかりやすいEasingの早見表がありましたので色々なパターンを試してください。
closedSymbol	“►”	子リンクがある場合、親リンクが閉じた状態で右横にくる要素DEMO4
openedSymbol	“▼”	子リンクがある場合、親リンクが開いた状態で右横にくる要素DEMO4
prependTo	“body”	ここに指定するセレクタの直下にモバイルメニューを追加します。 デフォルトはbodyなので、最上部に来るようになっています。これは便利！
allowParentLinks	false	クリック可能なリンクを親要素として許可します。 親要素にもリンクがある場合便利です。 trueの場合・・・DEMO4
showChildren	false	デフォルトで親リンクの子を表示します。
brand	“”	メニューバーにブランディング(メニュー名)を追加出来ます。 カテゴライズされたメニュー構成の場合などに使えるかもしれません。

DEMOのjsコード

※各DEMOがタイトルの下に来るようにPrependToで生成位置を指定しています。

DEMO1

$('.menu1').slicknav({
prependTo:'.menu1_prepend',
});

DEMO2

$('.menu2').slicknav({
 label: 'メニュー',
 prependTo:'.menu2_prepend'
});

DEMO3

$('.menu3').slicknav({
 label: '',
 prependTo:'.menu3_prepend',
 duration: 800,
 easingOpen: "easeOutBounce",
});

DEMO4

$('.menu4').slicknav({
 label: '',
 prependTo:'.menu4_prepend',
 closedSymbol: '開く',
 openedSymbol:'閉じる',
 allowParentLinks: 'true',
});

DEMO5

$('.menu4').slicknav({
 label: '',
 prependTo:'.menu5_prepend',
 brand:'コラム'
});

【必見】SlickNavに閉じるボタンを実装する方法

SlickNavでも、ハンバーガーメニューでよくある、「クリックしメニューが開くとハンバーガーが×のような閉じるボタンに変化するエフェクト」が実装できます！
DEMOページ内のハンバーガーメニューは全てこの仕様になっています。 基本的にはコピペでOKですが、幅や高さなどの指定をしているので、細かい調整などはご自身の環境やデザインに合わせてお願いします。

コピペOKのコード

css

/*ハンバーガーメニューのエフェクト*/
.slicknav_icon,
.slicknav_icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.slicknav_icon {
    position: relative;
    width: 50px;
    height: 44px;
}
.slicknav_menu .slicknav_icon-bar{
    position: absolute;
    left: 0;
}
.slicknav_icon span:nth-of-type(1) {
    top: 0;
}
.slicknav_icon span:nth-of-type(2) {
    top: 3px;
}
.slicknav_icon span:nth-of-type(3) {
    bottom: 0;
}
.active .slicknav_icon-bar:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
}
.active .slicknav_icon-bar:nth-of-type(2) {
    opacity: 0;
}
.active .slicknav_icon-bar:nth-of-type(3) {
    -webkit-transform: translateY(-6px) rotate(45deg);
    transform: translateY(-6px) rotate(45deg);
}

js

$(".slicknav_btn").click(function(){
 $(this).toggleClass("active");
});

まとめ

いかがでしたか？
レスポンシブのスマホ用メニュー実装方法は色々ありますが、その中でも本当に使いやすいプラグイン、SlickNavのオプション解説を中心に、ハンバーガーメニューのエフェクトを付けるといったアレンジまで紹介させていただいました。
cssでのデザインアレンジもとっても簡単です。
「レスポンシブ化でメニュー部分をどうしていいかわからない」という方にはとてもオススメですので、是非ご参考いただければと思います！

ハンバーガーメニューの実装方法などについては以下の記事で詳しく解説しておりますので、是非参考にしてみてください。