SlickNavは、スマホでよく見かけるドロップダウン形式のメニューを簡単に実装することができるjQueryプラグインです。
簡単なデモページを用意したので、動きについてはデモでご確認ください。
今回は、SlickNavの導入手順についてご紹介いたします。
ステップ1. SlickNavのダウンロードと設置
まずは、公式サイトからSlickNavをダウンロードします。ダウンロードしたZIPを解凍して、以下のファイルをサーバーにアップロードしてください。
- jquery.slicknav.min.js
- slicknav.css
HTML側でアップロードしたファイルとjQueryを読み込みます。以下を<head>～</head>内に記述します。
<link rel="stylesheet" href="css/slicknav.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/jquery.slicknav.min.js"></script>
slicknav.cssの読み込み以外は、</body>直前に記述しても大丈夫です。また、jQueryはダウンロードしてサーバーに設置してもOKです。
ステップ2. メニューの実装
以下のようなHTMLを記述して、メニューを実装します。
<ul id="menu"> <li><a href="">Home</a></li> <li><a href="">Menu1</a> <ul class="sub-menu"> <li><a href="">SubMenu1</a></li> <li><a href="">SubMenu2</a></li> <li><a href="">SubMenu2</a></li> </ul> </li> <li><a href="">Menu2</a></li> <li><a href="">Menu3</a></li> </ul>
SlickNavは、上記のような多階層のメニューにも対応しています。
ステップ3. SlickNavの呼び出し
HTMLの</body>直前に以下を記述して、SlickNavを呼び出します。
<script>
$(function(){
$('#menu').slicknav();
});
</script>
SlickNavが動作し、指定したIDのメニューがドロップダウンメニューとして実装されます。
ステップ4. CSSの調整
このままだと、HTMLに記述したメニューとSlickNavのドロップダウンメニューの両方が表示されてしまうので、CSSで表示/非表示を調整します。
.slicknav_menu {
display:none;
}
@media screen and (max-width: 767px) {
#menu {
display:none;
}
.slicknav_menu {
display:block;
}
}
上記では、横幅が767px以下の場合に通常のメニューを非表示にして、SlickNavのドロップダウンメニューを表示させるように指定しています。
SlickNavのオプション
SlickNavにはオプションも用意されています。
<script>
$(function(){
$('#menu').slicknav({
label: '', //メニューボタンに表示されるテキスト
duration: 1000, //アニメーションのスピード
easingOpen: "linear", //メニューが開く時のアニメーション
easingClose:"easeInQuad", //メニューが閉じる時のアニメーション
prependTo: "#menu-sp", //指定した要素内にメニューを表示
});
});
</script>
easingOpenとeasingCloseについては、jQuery UIのEasingが利用可能です。ただし、このオプションを利用するには、jQuery UIをロードする必要があります。
以下を<head>～</head>内に追加するか、jQuery UIをダウンロードしてサーバーに設置しましょう。
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
easingOpenとeasingCloseのオプションを指定すると、よりいい感じになりますね。
prependToを指定すると、指定した要素内にドロップダウンメニューを表示させることができます。デフォルトではbody直下に表示されますが、prependToを指定することで好きな場所にドロップダウンメニューを表示させることが可能です。
あとがき
とても簡単にスマホ用のドロップダウンメニューを実装できますので、スマホサイトのメニューをどうするか迷ったら、ぜひ導入してみてください。