【マウスオーバー】ヘッダーのグローバルナビゲーション展開【PCサイト用】

PCサイトでヘッダーのグローバルナビゲーションをマウスオーバーするとサブナビゲーションが展開します。透過の背景色の上にナビゲーションを配置して見やすくしています。

サンプルデモはこちら

htmlのコードは下記になります。
メインビジュアルは背景画像で表示するため、空のdivタグを用意しclass=”mv-block”を付与します。

<header>
	<div id="header">
		<ul class="menu-list">
			<li><a href="#">メインメニュー01</a></li>
			<li><a href="#">メインメニュー02</a></li>
			<li><a href="#">メインメニュー03</a></li>
			<li><a href="#">メインメニュー04</a></li>
		</ul>
		<ul class="sub-menu-list sub01">
			<li><a href="#">サブメニュー01</a></li>
			<li><a href="#">サブメニュー02</a></li>
			<li><a href="#">サブメニュー03</a></li>
		</ul>
		<ul class="sub-menu-list sub02">
			<li><a href="#">サブメニュー04</a></li>
			<li><a href="#">サブメニュー05</a></li>
			<li><a href="#">サブメニュー06</a></li>
			<li><a href="#">サブメニュー07</a></li>
			<li><a href="#">サブメニュー08</a></li>
		</ul>
		<ul class="sub-menu-list sub03">
			<li><a href="#">サブメニュー09</a></li>
			<li><a href="#">サブメニュー10</a></li>
			<li><a href="#">サブメニュー11</a></li>
		</ul>
	</div>
</header>
<main>
	<div class="mv-block"></div>
</main>

続いてCSSのコードです。
ヘッダーの透過の背景色はjQueryでも操作するため、CSSには!importantを付けておきます。ヘッダーのグローバルナビゲーションはスマホではハンバーガーメニューへ移行するのが一般的なため、ここでは非表示にするメディアクエリのみ記述しています。

#header {
	width: 100%;
	text-align: center;
	z-index: 9999;
	position: fixed;
	transition: 0.3s ease-in-out;
	box-sizing: border-box;
}
#header.hovered {
	background: rgba(0, 0, 0, 0.7) !important;
}
#header .menu-list,
#header .sub-menu-list {
	font-size: 0;
}
#header .menu-list li,
#header .sub-menu-list li {
	display: inline-block;
}
#header .menu-list li.selected {
	background: #c60109;
}
#header .menu-list li a {
	display: block;
	font-weight: bold;
	padding: 30px 15px;
	font-size: 16px;
	color: #ffffff;
	text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px;
	text-decoration: none;
}
#header .sub-menu-list {
	display: none;
	width: 100%;
	border-top: solid 1px #c60109;
	transition: 0.3s ease-in-out;
}
#header .sub-menu-list.selected {
	display: block;
}
#header .sub-menu-list li a {
	display: block;
	padding: 30px 15px;
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
}
#header .sub-menu-list li a:hover {
	opacity: 0.7;
}
.mv-block {
	background: url(mv.jpg) no-repeat top center;
	background-size: cover;
	text-align: center;
	overflow: hidden;
	width: 100%;
	height: 600px;
}
@media screen and (max-width: 768px) {
	#header {
		display: none;
	}
}

最後にjQueryのコードです。
ヘッダーのdivタグにマウスオーバーした時の処理、グローバルナビゲーションのliタグにマウスオーバーした時の処理、ページスクロール時にスクロール位置がメインビジュアルの高さを越えた時の処理を分けて記述します。
ヘッダーのdivタグにマウスオーバーした時は透過の背景色を表示します。マウスアウト時は非表示にします。それと同時に、グローバルナビゲーションの選択状態を解除、サブナビゲーションを非表示にするのがポイントです。逆に言えば、ヘッダーのdivタグからマウスアウトしない限り、グローバルナビゲーションの選択状態とサブナビゲーションの表示は維持されます。
グローバルナビゲーションのliタグにマウスオーバーした時はグローバルナビゲーションを選択状態にします。それと同時に他のグローバルナビゲーションの選択状態は解除します。またswitchを利用して、グローバルナビゲーションのテキストに応じたサブナビゲーションを表示します。該当のテキストがない場合サブナビゲーションは表示しませんが、他のサブナビゲーションを非表示にするため、変数currentに#header .sub-menu-listを代入します。これでsiblingsを利用して、他のサブナビゲーションが指定できるようになります。
ページスクロール時にスクロール位置がメインビジュアルの高さを越えた時は、ヘッダーのdivタグの透過の背景色を表示します。スクロール位置がメインビジュアルの高さの範囲内の場合は、透過の背景色は非表示にします。

$(function() {
	$(window).on('scroll', function() {
		var mvHeight = parseInt($('.mv-block').innerHeight());
		if($(window).scrollTop() >= mvHeight) {
			$('#header').css('background','rgba(0, 0, 0, 0.7)');
		} else {
			$('#header').css('background','rgba(0, 0, 0, 0.0)');
		}
	});

	$('#header').hover(
		function() {
			$(this).addClass('hovered');
		},
		function() {
			$(this).removeClass('hovered');
			$(this).find('.menu-list li').removeClass('selected');
			$(this).find('.sub-menu-list').removeClass('selected');
		}
	);

	$('#header .menu-list li').hover(
		function() {
			var ttl = $(this).children('a').text();
			$(this).addClass('selected');
			$(this).siblings().removeClass('selected');

			var current;
			switch(ttl) {
				case "メインメニュー01":
					current = $('#header .sub-menu-list.sub01');
					$(current).addClass('selected');
					break;
				case "メインメニュー02":
					current = $('#header .sub-menu-list.sub02');
					$(current).addClass('selected');
					break;
				case "メインメニュー03":
					current = $('#header .sub-menu-list.sub03');
					$(current).addClass('selected');
					break;
				default:
					current = $('#header .sub-menu-list');
					break;
			}
			$(current).siblings().removeClass('selected');
		},
		function() {
			//マウスカーソルが離れた時の処理
		}
	);
});
タイトルとURLをコピーしました