WEBサイトコーディングの中で、テクニックがいる箇所の一つが、グローバルナビゲーション。
今回は、PC時は2階層のメガメニュー、スマートフォン時はプルダウンの構成にしたサンプルです。
※ 細かい装飾は反映していません。
レスポンシブ対応:グローバルナビゲーション構成


HTMLソース
ハンバーガーメニューのアイコン素材
SP用ハンバーガーメニーで表示させるボタンアイコンは「Font Awesome」を利用しています。
HTMLソース全体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initiascale=1.0,user-scalable=no" />
<title>グローバルナビ:メガメニュー、レスポンシブ対応</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<!--▼ SP:ハンバーガーメニューボタン -->
<div class="global-nav-header">
<div class="global-nav-icon">
<i class="fas fa-bars"></i>
</div>
</div>
<!--▲ SP:ハンバーガーメニューボタン -->
<!--▼ グローバルナビゲーション -->
<nav class="global-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#">ホーム</a>
</li>
<li class="nav-item">
<a href="#">ページ A</a>
<div class="nav-item_sub">
<div class="inner">
<ul>
<li><a href="">ページA:サブメニュー01</a></li>
<li><a href="">ページA:サブメニュー02</a></li>
<li><a href="">ページA:サブメニュー03</a></li>
<li><a href="">ページA:サブメニュー04</a></li>
</ul>
<ul>
<li><a href="">ページA:サブメニュー05</a></li>
<li><a href="">ページA:サブメニュー06</a></li>
</ul>
<ul>
<li><a href="">ページA:サブメニュー07</a></li>
<li><a href="">ページA:サブメニュー08</a></li>
<li><a href="">ページA:サブメニュー09</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a href="#">ページ B</a>
<div class="nav-item_sub">
<div class="inner">
<ul>
<li><a href="">ページB:サブメニュー01</a></li>
<li><a href="">ページB:サブメニュー02</a></li>
</ul>
<ul>
<li><a href="">ページB:サブメニュー03</a></li>
<li><a href="">ページB:サブメニュー04</a></li>
<li><a href="">ページB:サブメニュー05</a></li>
</ul>
<ul>
<li><a href="">ページB:サブメニュー06</a></li>
<li><a href="">ページB:サブメニュー07</a></li>
<li><a href="">ページB:サブメニュー08</a></li>
<li><a href="">ページB:サブメニュー09</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#">ページ C</a></li>
<li class="nav-item"><a href="#">ページ D</a></li>
<li class="nav-item"><a href="#">ページ E</a></li>
</ul>
</nav>
<!--▲ グローバルナビゲーション -->
<div class="contents">
<h2>コンテンツエリア</h2>
<p>
アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈(たいくつ)しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。「絵や会話のない本なんて、なんの役にもたたないじゃないの」とアリスは思いました。そこでアリスは、頭のなかで、ひなぎくのくさりをつくったら楽しいだろうけれど、起きあがってひなぎくをつむのもめんどくさいし、どうしようかと考えていました(といっても、昼間で暑いし、とってもねむくて頭もまわらなかったので、これもたいへんだったのですが)。そこへいきなり、ピンクの目をした白うさぎが近くを走ってきたのです。
</p>
<p>
それだけなら、そんなにめずらしいことでもありませんでした。さらにアリスとしては、そのうさぎが「どうしよう! どうしよう! ちこくしちゃうぞ!」とつぶやくのを聞いたときも、それがそんなにへんてこだとは思いま
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSSソース
PC時のメガメニューはCSSで設定しています。
第一階層のメニュー[.nav-item]をhoverした時に、第二階層[.nav-item_sub]を表示します。
CSSソース全体
/* 共通項目 */
* {
box-sizing: border-box;
}
a:hover {
opacity: 0.8;
}
p {
line-height: 1.7;
}
ul {
list-style: none;
}
/* ベースレイアウト */
.container {
margin: 40px auto;
position: relative;
width: 1200px;
}
@media screen and (max-width: 768px) {
.container {
margin: 0 auto 40px auto;
width: 90%;
}
}
/* グローバルメニュー */
.global-nav {
margin: 0;
position: relative;
}
.global-nav .nav-list {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
.global-nav .nav-list .nav-item {
flex: 1;
}
.global-nav .nav-list .nav-item a {
border-right: 1px solid #ccc;
color: #333;
display: block;
padding: 0.6em 0.4em;
text-align: center;
text-decoration: none;
}
.global-nav .nav-list .nav-item:last-child a {
border-right: none;
}
/* サブナビゲーション */
@media screen and (min-width: 768px) {
.nav-list {
position: relative;
}
.nav-item_sub {
background: #ccc;
left: 0;
margin: 0 calc(50% - 50vw);
opacity: 0;
position: absolute;
top: 40px;
transition: all 0.2s ease;
visibility: hidden;
width: 100vw;
}
.nav-item_sub .inner {
display: flex;
margin: 0 auto;
width: 1200px;
}
.nav-item_sub .inner ul {
margin: 20px 20px 20px;
}
.global-nav .nav-list .nav-item_sub a {
text-align: left;
}
.nav-item:hover .nav-item_sub {
opacity: 1;
visibility: visible;
}
}
/* SP時:ハンバーガーメニューボタン */
.global-nav-icon {
display: none;
}
@media screen and (max-width: 768px) {
.global-nav-header {
height: 50px;
}
.global-nav .nav-list {
background: rgba(0, 0, 0, 0.8);
display: none;
left: 50%;
padding: 10px;
position: absolute;
transform: translate(-50%, 0%);
width: 100%;
}
.global-nav .nav-list .nav-item a {
border-bottom: 1px solid #ccc;
border-right: none;
color: #fff;
padding: 1rem 1rem;
text-align: left;
}
.global-nav .nav-list .nav-item:last-child a {
border-bottom: none;
}
.global-nav-icon {
color: #999;
cursor: pointer;
display: inline-block;
font-size: 28px;
position: absolute;
right: 5px;
top: 15px;
z-index: 2;
}
}
@media screen and (max-width: 768px) {
.nav-item_sub {
display: none;
}
.global-nav {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
.nav-list {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
JQueryソース
SP時の挙動については、jQueryで記述しています。
// [SP]ハンバーガをクリックしたらメニューを表示
$(".global-nav-icon").on("click", function () {
if ($(".global-nav .nav-list").css("display") === "block") {
$(".global-nav .nav-list").slideUp("1500");
} else {
$(".global-nav .nav-list").slideDown("1500");
}
/* メニューアイコンを切り替える */
$("i", this).toggleClass("fas fa-bars fas fa-times");
});
// Windowサイズによってスタイルを変更
$(window).on("load resize", function () {
if (window.innerWidth > 768) {
$(".global-nav .nav-list").css("display", "flex");
} else {
$(".global-nav .nav-list").css("display", "none");
$("i").removeClass("fas fa-times");
$("i").addClass("fas fa-bars");
}
});
// アコーディオンメニュー
$(".nav-item").on("click", function () {
if (window.matchMedia("(max-width: 768px)").matches) {
$(this).children(".nav-item_sub").slideToggle();
$(".nav-item").not($(this)).children(".nav-item_sub").slideUp();
}
});