[jQuery+CSS] レスポンシブ対応のナビゲーション・メニュー

めっきりスマホ関係のお仕事が多くなってきたこの頃。色々と思うこと・悩むこともあります。その中の一つにスマホ、タブレット、パソコンでUIを兼用する際に用いられるレスポンシブ・レイアウトに関してはナビゲーション・メニューの実装をもう少しスムーズに簡潔に進めたいなと感じています。これまでの経験からある程度パターンが決まってきているので自分なりに汎用的なコードを作っておこうと考えるも仕事がひと段落したら一喜一憂。怠惰な自分がそこにいます。ただ新年度に入り気持ち新たにモチベーションが高いうちに面倒なことは済ませておこうということでOnextrapixelさんを参考に自分向けに手直ししてみたので簡単にご紹介。

  サンプル:レスポンシブ対応のナビゲーション・メニュー

上のサンプルを開いてブラウザの幅を左右にブイブイと拡大・縮小するとある一定の箇所でナビゲーション・メニューが下図キャプチャのように変化すると思います。ブラウザが縮まった時はナビゲーション・メニューが非表示になり「MENU」ボタンが表示されます。「MENU」ボタンをクリックするとナビゲーション・メニューが開閉されます。逆にブラウザを広げるとwebサイトでおなじみの並列型ナビゲーションに戻るはずです。今回は変化する境目にあたるブレイクポイントを768pxにしてスマホもしくはiPadが縦向きのときに変化するよう作っています。
レスポンシブル対応のナビゲーション・メニュー

コードの重要なところだけ軽く解説を。

<nav id="navigation">
<p><span>MENU</span></p>
<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>
</nav>

HTMLはナビゲーション・メニューとして表示されるリスト要素とブラウザの横幅が収縮した時に「MENU」ボタンとして表示される要素からなっています。

$(function(){
	var open = false;

	function resizeMenu() {
		// MENUボタンとナビゲーション・メニューの表示・非表示を定義
		if($(this).width() < 768) {
				// ブラウザの横幅が収縮した時の処理
		} else if($(this).width >= 768) {
				// ブラウザの横幅が拡大した時の処理
		}
	}

	function toggleMenu() {
		// MENUボタンをクリックしたときの開閉を定義
	}

	$(window).resize(resizeMenu);
	resizeMenu();
	toggleMenu();
});

jQueryはブレイクポイントを計って「MENU」ボタンとナビゲーション・メニューの表示・非表示を制御するresizeMenu()と「MENU」ボタンをクリックした際にナビゲーション・メニューを開閉するtoggleMenu()によって動的に操作しています。

@media screen and (max-width: 768px) {
	/* ブラウザの横幅が収縮した時のスタイル定義 */
}

CSSはブレイクポイントに達したときのスタイル定義をして視角的な要素を整えています。

とりあえずこれで必要最低限な要素は間に合っているかと思います。ナビゲーション・メニューにサブメニューも追加して開閉処理なんて要望もありそうかな。。。

  • 2013.04.08
  • お仕事っぽいこと