[jQuery]レスポンシブに対応したナビゲーションを作ってみました。

ウィンドウの幅に応じて、動作とデザインが切り替わるナビゲーションを作ってみました。ウィンドウ幅が広ければヘッダーに横一列で表示し、スマフォなどの場合はボタンで操作でナビゲーションが開閉します。

html

<header class="header">
	<h1>sample-responsive_menu</h1>
	<button class="menu_btn none">メニュー</button>
	<nav class="navigation">
		<ul>
			<li>メニュー1</li>
			<li>メニュー2</li>
			<li>メニュー3</li>
			<li>メニュー4</li>
			<li>メニュー5</li>
		</ul>
	</nav>
</header>

PCなどではヘッダーに横一列に、スマフォでは縦に並べて必要なときにボタンで開閉させる、オーソドックスなナビゲーション。

css

.none{
	display: none;
}

.menu_btn{
	cursor: pointer;
	padding: 10px;
}

.navigation li{
	list-style: none;
}

@media screen and (min-width: 641px) {
	.navigation li{
		float: left;
		margin: 10px;
	}
}

jQuery

jQuery(function() {


	var $btn = jQuery('.menu_btn');
	var $nav = jQuery('.navigation');

	/*
	 * ブラウザのウィンドウ幅を取得してメニューボタンとナビゲーションの表示/非表示を切り替え
	 */

	jQuery(window).resize(function(){

		var w = jQuery(window).width(); //ブラウザの幅を取得
		var x = 768;　//ブレイクポイントを設定

		if (w <= x) { // ウィンドウサイズが768px以下

			jQuery($btn).removeClass('none');
			jQuery($nav).addClass('none');

			} else { //ウィンドウサイズが768以上
				jQuery($btn).addClass('none').text('メニュー'); //非表示・文字をメニューにする
				jQuery($nav).removeClass('none').removeAttr('style'); //表示・styleを初期化する
			}

	});

	/*
	 * クリックイベントによるスライドダウン/アップ
	 */

	jQuery($btn).on('click',(function(){

		if (jQuery($nav).css('display')=='none'){
			jQuery($nav).slideDown('slow');
			jQuery($btn).text('メニューを閉じる');
		} else {
			jQuery($nav).slideUp('fast');
			jQuery($btn).text('メニュー');
		}

		})
	);


});

demo

開閉ボタンとナビゲーションは、ウィンドウ幅に応じて.noneを付けたり取ったりしてdislplayの状態をコントロールします。ナビゲーションが閉じているときはボタンの文字が「メニュー」、開いているときは「メニューを閉じる」になります。

PC閲覧時にウィンドウ幅をリサイズした場合も考慮していて、ウィンドウ640px以下にしてナビゲーションを開いた後、ウィンドウサイズを641px以上にした場合、ナビゲーションはいったん初期化。非表示になります。ボタンの文字もメニューに戻ります。

高機能なjQueryプラグインがいろいろあるので使ってもいいのですが、自分で作ったほうがカスタマイズが簡単だったり、設置が手軽だったりするかと。

なにより自分で作ってみるといろいろと勉強になります。

※なお、jQuery(window).resize(function(){/*何らかの処理*/});という記述でウィンドウ幅を取得しているのですが、リサイズし続ける間中取得し続けるので、発火する処理によってはブラウザに負荷がかかるようです。注意が必要かと思います。

参考：[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle