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;
		}
	}

jQuery.responsive-nav デモ

デモ

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

JavaScript

HTML

CSS