Facebook的なスマホナビゲーションを実現できるレスポンシブなjQueryプラグイン作った。

レスポンシブなサイトの場合、グローバルナビゲーションの表示をどうするか悩む方は多いと思います。そんな方に便利なjQueryプラグインを作成しましたので公開します。jquery.responsive-nav は、グローバルナビゲーションをレスポンシブにし、スマートフォンの場合はFacebookのような横からニュッとスライドしてくるナビゲーション（オフキャンバスナビ）に変化させるjQueryプラグインです。

ダウンロード

ソースはGitHubにて公開しています。

デモ

jquery.responsive-nav の基本的な使い方

jQuery、jquery.responsive-nav.js の3つのjsファイルと、jquery.responsive-nav.css を読み込みます。そして任意の要素に対して responsive_nav()を実行します。

JavaScript

jQuery( function( $ ) {
	// 例として #global-nav に対して responsive_nav() を実行します。
	$( '#global-nav' ).responsive_nav();
} );

HTML

<div id="responsive-btn"></div>は任意の場所に設置できます。PC用のナビゲーションを表示するかスマートフォン用のナビゲーションを表示するかは、<div id="responsive-btn"></div>がdisplay: blockか displya: noneかで判断されます。display: blockだとスマートフォン用ナビゲーションを表示、display: noneだとPC用のナビゲーションを表示します。デフォルトはdisplay: noneとなるので、メディアクエリーで一定の幅より狭くなったときにdisplay: blockにするように設定します。

ナビゲーション自体は、ul・liの入れ子でマークアップする必要があります。その外側は特に指定はありませんが、responsive_nave()を実行するための要素で囲む必要があります。

<div id="responsive-btn"></div>

<div id="global-nav">
	<ul>
		<li><a href="">ホーム</a></li>
		<li>
			<a href="">会社案内</a>
			<ul>
				<li><a href="">組織図</a></li>
				<li>
					<a href="">部署案内</a>
					<ul>
						<li><a href="">営業部</a></li>
						<li><a href="">経理部</a></li>
						<li><a href="">システム開発部</a></li>
						<li><a href="">サポート</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="">よくあるご質問</a></li>
		<li><a href="">お問い合わせ</a></li>
	</ul>
<!-- end #global-nav" --></div>

CSS

スマートフォン用のCSSはガチガチにあたっていますが、PC用のナビゲーションはデザインに自由度をもたすため、最低限のスタイルのみあてています。上記のデモではPC用のナビゲーションのデザインを行うために、下記のスタイルを追加であてています。また、メディアクエリーで幅が939px以下になったときにスマートフォン用のナビゲーションに変化するように設定しています。

#global-nav {
	background-color: #3886FC;
}
#global-nav ul li a {
	color: #fff;
	background-color: #3886FC;
	font-size: 12px;
	padding: 5px 20px;
	text-decoration: none;
}
#global-nav ul li a:hover {
	background-color: #5093F8;
}
#global-nav ul li ul {
	display: none;
}
@media screen and ( max-width: 939px ) {
	#responsive-btn {
		display: block;
		position: absolute;
		right: 20px;
		top: 10px;
	}
}