jQuery 2014-12-26

スマホのドロップダウンメニューの実装に使える【SlickNav】使い方

slicknav

今回は、スマホのドロップダウンメニューの実装などに大変便利なjQueryプラグイン【SlickNav】の使い方のご紹介です。
実際に利用してみたら、とても便利でしたのでご紹介させて頂きます。

こちらのプラグインのとても便利な所が、既存のメニュー(ul要素でマークアップしている必要があります)をそのままコピーしてくれてモバイル用のスタイルで表示させてくれるんです。
なので、これからレスポンシブ化をするサイトなんかにこちらのjqueryプラグイン【SlickNav】利用したらとても作業も楽なんじゃないかなーと思います。
また、jQuery UIを読み込むとメニューをオープンとクローズ時のアニメーションをeasingのアニメーションを利用出来るようになっています。

レスポンシブに対応していますので、スマホのメニューだけではなく、ある要素をモバイルで、スペースを節約したい時に、こちらの【SlickNav】を利用してスペースの節約もできそうですね。

なんか、言葉で言い表すのが下手すぎてすいません。
一応、実際に【SlickNav】を利用したデモサイトも用意しましたので、是非ご覧ください。
デモサイトでは、ウインドウサイズを768px以下にすると、モバイル用のメニューを表示させています。

デモサイト

実装する場合は、下記リンク先より必要ファイルをダウンロードして下さい。

SlickNav

【SlickNav】の使い方

それでは、スマホのドロップダウンの実装に使えそうな【SlickNav】を使い方を説明していきたいと思います。
まずは、デフォルトの状態で利用する方法を紹介したいと思います。
実装するにあたりこちらより必要なファイルなどをダウンロードして下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードした【slicknav.css】【jquery.slicknav.min.js】をhead内に読み込みます。
また、CDNで【modernizr.min.js】も読み込みます。
jQuery本体のバージョンは、1.7以降を読み込んで下さい。
下記の読み込み時の階層などは、ご自身の環境に合わせて変更して下さい。

<link rel="stylesheet" href="css/slicknav.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>

HTML

次にHTMLの準備をしていきます。
今回は、li要素に一つ入れ子要素でメニューの階層を作っています。

<ul id="menu">
	<li><a href="">HOME</a></li>
    <li><a href="">SAMPLE</a>
   	<ul class="sub-menu">
    	    <li><a href="">Level1</a></li>
    	    <li><a href="">Level2</a></li>
    	    <li><a href="">Level3</a></li>
    	</ul>
	</li>
    <li><a href="">ABOUT</a></li>
    <li><a href="">CONTACT</a></li>
</ul>

JavaScript

次に、上記でul要素に付けたID名を指定します。
デフォルトの状態で利用しています。

<script>
$(function(){
	$('#menu').slicknav();
});
</script> 

CSS

最後にCSSにメディアクエリなどの追加すれば、実装の完了です。
ブレイクポイントは、768pxにしていますので、ご自身の利用する環境によって変更などをして下さい。

.slicknav_menu {
	display:none;
}
/*Media Queries*/
@media screen and (max-width: 768px) {
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
}

上記までを記載すれば、【SlickNav】の実装の完了となります。
万が一動作しない場合は、jQuery本体のバージョンが、1.7以前のを読み込んでいないかや読み込みファイルの順番や独自スクリプトのファイルを読み込んでいる場合は、一旦そのファイルを削除してもう一度動作確認をしてみてください。
実際に【SlickNav】を使ったデモサイトもご用意していますので、ご覧ください。

デモサイト

デモサイトで利用しているアイコンフォントは、【Font Awesome】を利用しています。
利用方法などは下記記事をご参考下さい。

商用利用無料のWebアイコンフォント【Font Awesome】利用方法

【SlickNav】オプション

jQueryプラグイン【SlickNav】では、オプションも用意されていますので、一部を下記に紹介させて頂きます。

<script>
$(function(){
	$('#menu-headnav').slicknav({
	label: '', //デフォルトは'MENU'
	duration: 750, //アニメーションのスピード
	easingOpen: "easeOutBounce", //jQuery UI easing
	easingClose:"swing", //jQuery UI easing
	prependTo: "#mobile-menu", //指定した要素内にメニュー表示 デフォルトはbody
});
});
</script>

easingOpenとeasingCloseについて

easingOpenとeasingCloseのオプションを利用する場合は、jQuery UIを読み込む必要がありますので、下記コードをhead要素内に貼り付けて下さい。
jQuery UIの最新バージョンなどはこちらよりご確認下さい。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

アニメーションはjQuery UIのeasingを利用できますので、こちらを参考にされて下さい。

prependTo

このprependToのオプションは、指定したID/クラス名の要素内にメニューを表示させます。
例えば、#men-secondの要素に表示させたい時は、下記コードのようになります。

<script>
$(function(){
	$('#menu').slicknav({
	prependTo: "#men-second", 
});
});
</script>
<div id="men-second"></div>

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS.レオル隊(上級) を攻略したパーティメンバー

NEXT css3-img-hover

CSS3を利用してマウスオーバーで画像を拡大や変化させる +α