スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」

スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」

スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」

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を指定することで好きな場所にドロップダウンメニューを表示させることが可能です。

あとがき

とても簡単にスマホ用のドロップダウンメニューを実装できますので、スマホサイトのメニューをどうするか迷ったら、ぜひ導入してみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です