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

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

スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。