横並びのナビゲーションでレスポンシブに対応する

PC時は横並び + プルダウン + レスポンシブでスマホ時にナビゲーション切り替え という形でナビゲーションを実装してみます。

サンプルコード

HTML

.head-nav-lv1_breakで、PC版の表示で画面幅が狭い時の改行位置調整を行っています。

<div class="head">
	<div id="nav-switch"></div>
	<div class="head-nav">
		<ul class="head-nav-lv1">
			<li class="head-nav-lv1_item">
				<a href="">
					<div class="head-nav-lv1_itemInner">
						<span class="head-nav-lv1_break">HOME</span>
					</div>
				</a>
			</li>
			<li class="head-nav-lv1_item">
				<a href="">
					<div class="head-nav-lv1_itemInner">
						<span class="head-nav-lv1_break">メニューの</span><span class="head-nav-lv1_break">サンプル</span>
					</div>
				</a>
			</li>
			<li class="head-nav-lv1_item">
				<a href="">
					<div class="head-nav-lv1_itemInner">
						<span class="head-nav-lv1_break">下層メニュー</span><span class="head-nav-lv1_break">サンプル</span>
					</div>
				</a>
				<div class="head-nav-lv2_wrap">
					<ul class="head-nav-lv2">
						<li class="head-nav-lv2_item">
							<a href="">サブメニュー1</a>
						</li>
						<li class="head-nav-lv2_item">
							<a href="">サブメニュー2</a>
						</li>
						<li class="head-nav-lv2_item">
							<a href="">サブメニュー3</a>
						</li>
						<li class="head-nav-lv2_item">
							<a href="">サブメニュー4</a>
						</li>
					</ul>
				</div>
			</li>
			<li class="head-nav-lv1_item">
				<a href="">
					<div class="head-nav-lv1_itemInner">
						<span class="head-nav-lv1_break">Sample</span> <span class="head-nav-lv1_break">menu test</span>
					</div>
				</a>
			</li>
			<li class="head-nav-lv1_item">
				<a href="">
					<div class="head-nav-lv1_itemInner">
						<span class="head-nav-lv1_break">メニュー</span>
					</div>
				</a>
			</li>
			<li class="head-nav-lv1_item">
				<a href="">
					<div class="head-nav-lv1_itemInner">
						<span class="head-nav-lv1_break">メニュー</span>
					</div>
				</a>
			</li>
		</ul>
	</div>
</div>

CSS

基本はPC版の表示で、MediaQueriesでスマホ・タブレット時のスタイルを上書きするようにしています。

/* -------------------------
	PC
------------------------- */
#nav-switch {
	display: none;
}
.head-nav {
	position: relative;
	width: 100%;
	background: #1a1a1a;
}
.head-nav-lv1 {
	max-width: 1000px;
	margin: 0 auto;
}
.head-nav-lv1:before,
.head-nav-lv1:after {
	content: "";
	display: table;
}
.head-nav-lv1:after {
	clear: both;
}
.head-nav-lv1_item {
	position: relative;
	float: left;
	width: 16.6666%;
	box-sizing: border-box;
	border-left: #cccccc 1px solid;
}
.head-nav-lv1_item:first-child {
	border-left: none;
}
.head-nav-lv1_item > a {
	display: block;
	height: 25px;
	padding: 25px 5px 0;
	color: #ffffff;
	text-align: center;
}
.head-nav-lv1_item.is-active > a {
	background: #666666;
}
.head-nav-lv1_itemInner {
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.head-nav-lv1_break {
	display: inline-block;
	white-space: nowrap;
}
.head-nav-lv2_wrap {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	background: #666666;
}
.head-nav-lv2 {
}
.head-nav-lv2_item {
	border-bottom: #999999 1px solid;
}
.head-nav-lv2_item > a {
	display: block;
	padding: 10px 5px;
	color: #ffffff;
}

/* -------------------------
	SP
------------------------- */
@media screen and (max-width:768px) {
#nav-switch {
	display: block;
	position: absolute;
	top: 18px;
	right: 10px;
	width: 25px;
	height: 15px;
	cursor: pointer;
}
#nav-switch:before,
#nav-switch:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 1px;
	background: #000000;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
#nav-switch:before {
	top: 0;
	box-shadow: 0 6px 0 #000000;
}
#nav-switch:after {
	top: 12px;
}
#nav-switch.is-open:before {
	top: 5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	box-shadow: none;
}
#nav-switch.is-open:after {
	top: 5px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.head-nav {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
}
.head-nav-lv1_item {
	float: none;
	width: 100%;
}
.head-nav-lv1_item > a {
	height: auto;
	padding: 10px 5px;
	border-bottom: #333333 1px solid;
	text-align: left;
}
.head-nav-lv1_itemInner {
	position: relative;
	display: block;
	-webkit-transform: none;
	transform: none;
}
.head-nav-lv2_wrap {
	display: none;
	position: static;
	background: #666666;
}
} /* max-width:768px */

JavaScript

$(function() {
	var navFlag = ''; // 現在のナビゲーション表示がpcかspかが入る
	var hoverClass = 'is-active'; // PCのホバー時に付与するclass名
	var openClass = 'is-open'; // スマホの開閉時に付与するclass名
	// jsで使用するナビゲーションのclass名
	var $navWrapper = $('.head-nav');
	var $navSwitch = $('#nav-switch');
	var navLv1Item = '.head-nav-lv1_item';
	var navLv2 = '.head-nav-lv2_wrap';

	// ナビゲーションホバー時
	$(navLv1Item).hover(function() {
		if(navFlag == 'pc') {
			$(this)
				.addClass(hoverClass)
				.children(navLv2).stop(true, true).slideDown();
		}
	}, function() {
		if(navFlag == 'pc') {
			$(this)
				.removeClass(hoverClass)
				.children(navLv2).stop(true, false).slideUp();
		}
	});

	// ハンバーガーボタンクリック時
	$navSwitch.click(function() {
		// 表示・非表示の切り替え
		if($navWrapper.is(':visible')) {
			$(this).removeClass(openClass);
			$navWrapper.slideUp();
		} else {
			$(this).addClass(openClass);
			$navWrapper.slideDown();
		}
	});

	// ナビゲーションクリック時
	$(navLv1Item + ' > a').click(function(e) {
		// スマホで下層ナビがある場合
		if(navFlag == 'sp' && $(this).next().length) {
			// 表示・非表示の切り替え
			if($(this).next().is(':visible')) {
				$(this).next().slideUp();
			} else {
				$(this).next().slideDown();
			}
			// リンクはキャンセルする
			e.preventDefault();
		}
	});

	$(window).on('load resize', function() {
		navCheck();
	});

	// ナビゲーションの状態チェック
	function navCheck() {
		// スマホ時のハンバーガーボタンが表示されているかどうかで判別
		winCheck = $navSwitch.is(':visible');

		// SP時の表示に切り替わったとき
		if(winCheck && navFlag != 'sp') {
			navFlag = 'sp';
			spNavInit();

		// PC時の表示に切り替わったとき
		} else if(!winCheck && navFlag != 'pc') {
			navFlag = 'pc';
			pcNavInit();
		}
	}

	// PC時の初期設定
	function pcNavInit() {
		$navSwitch.removeClass(openClass);
		$navWrapper.removeAttr('style');
		$(navLv2).removeAttr('style');
	}

	// SP時の初期設定
	function spNavInit() {
		$(navLv2).removeAttr('style');
	}
});

ナビゲーションのデモページ
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年12月
1234567
891011121314
15161718192021
22232425262728
293031