WordPressで実装されるグローバルナビゲーションのほとんどは、サブメニューを下方向に展開する作りになっている気がします。

ですが最近、それを上方向に展開するグローバルナビゲーションをつくる機会がありました。

そのときもデフォルトでサブメニューを下方向に展開する作りになっていたので、CSSを使ってWordPressテーマの改修を行い、上方向に展開するグローバルナビゲーションを実装しました。

今回はそのサンプルをご紹介したいと思います。

完成イメージ

マウスホバーしたときに、サブメニューを上方向に展開します。

コード全体像

<!DOCTYPE html>
<html>
<head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#dummy {
			width: 100%;
			background-color: aqua;
			height: 300px;
		}

		a {
			text-decoration: none;
			color: black;
			display: flex;
		}

		#wrap {
			width: 50%;
			margin: 0 auto;
		}

		#menu {
			display: flex;
		}

		li {
			list-style: none;
			width: 100%;
			padding: 5px;
			background-color: #ff7f50;
		}

		li:hover {
			background-color: #1e90ff;
		}

		.item ul {
			display: none;
		}

		.item {
			position: relative;
		}

		.item:hover a + ul {
			display: block;
			position: absolute;
			bottom: 100%;
		}

		#wrap, #wrap * {
			overflow: visible;
			z-index: 9999;
		}
	</style>
</head>

<body>
	<div id="dummy">
		<p>あいうえお</p>
	</div>
	<div id="wrap">
		<ul id="menu">
			<li class="item">
				<a href="https://www.kaname-gh.co.jp/">ホーム</a>
			</li>
			<li class="item">
				<a href="https://www.kaname-gh.co.jp/case/">提案事例</a>
				<ul>
					<li class="sub-item">
						<a href="https://www.kaname-gh.co.jp/web_site/">WEBサイト制作</a>
					</li>
					<li class="sub-item">
						<a href="https://www.kaname-gh.co.jp/case01/">業務システム1</a>
					</li>
					<li class="sub-item">
						<a href="https://www.kaname-gh.co.jp/case02/">業務システム2</a>
					</li>
					<li class="sub-item">
						<a href="https://www.kaname-gh.co.jp/case03/">業務システム3</a>
					</li>
				</ul>
			</li>
			<li class="item">
				<a href="https://www.kaname-gh.co.jp/company/">会社情報</a>
			</li>
			<li class="item">
				<a href="https://www.kaname-gh.co.jp/info-2/">お知らせ</a>
			</li>
			<li class="item">
				<a href="https://www.kaname-gh.co.jp/blog/">ブログ</a>
			</li>
			<li class="item">
				<a href="https://www.kaname-gh.co.jp/contact/">お問い合わせ</a>
			</li>
		</ul>
	</div>
</body>

</html>

ポイント

いろいろ書いていますが、「サブメニューを上方向に展開する」ポイントは次の部分でしょうか。

		/* ① */
		.item {
			position: relative;
		}

		/* ② */
		.item:hover a + ul {
			display: block;
			position: absolute;
			bottom: 100%;
		}

		/* ③ */
		#wrap, #wrap * {
			overflow: visible;
			z-index: 999;
		}

①は子要素であるサブメニューの位置をabsoluteで指定するため書いています。

②では親メニューがマウスホバーされたときサブメニューの挙動を指定しています。

具体的には、それの「表示」と「位置」の設定です。

display: block;でサブメニューを表示して、position: absolute;とbottom: 100%;で親メニューの底辺から高さ100%の位置を指定しています。

そうすると上方向にサブメニューを展開することができます。

ちなみにbottom: 100%;をなくすと下方向にサブメニューを表示することもできます。

③では次の設定を行っています。

  • サブメニューが親要素からはみ出ても表示する
  • サブメニューを最前面に表示する

overflow: visible;で、サブメニューが親要素からはみ出ても表示するようにしています。

z-indexはその値が大きほど前面表示になるので999を指定すれば十分かと思います。