メガメニューは、従来のドロップダウンメニューを拡張したもので、より多くの情報を整理して表示できる強力なナビゲーションツールです。
メガメニューの実装は実務でもよくありますが、1から作るとなるとちょっと面倒に感じるかも知れません。
しかし、HTMLとCSSだけで簡単に作れるので、今回はその方法をサンプルを使って解説していきます。
（有料になっていたらすいません🙇♂️）
メガメニューとは？
メガメニューは、マウスホバーまたはクリックによって、ドロップダウンメニューのように展開される大型のメニューです。
つまり、メガメニューはドロップダウンメニューの一種になります。
通常のドロップダウンメニューと比べて広いスペースを確保することで、階層化したページをグループごとに表示したり、写真やアイコンを使ったユーザビリティの高いメニューが作れるのが特徴です。
-
CSSだけでドロップダウンメニューを作る方法【4種類のサンプル付き】
続きを見る
CSSのみのメガニューの作り方
今回ご紹介するメガメニューは、レスポンシブは考慮していません。
開くメニューも最小限のものなので、実際にはもう少し複雑になるかと思います。
今回解説するのは、以下になります。
- シンプルなメガメニュー
- フェードで表示されるメガメニュー
- 上からスライドで表示されるメガメニュー
上記3パターンで、それぞれ『メニュー幅・画面幅・任意の幅』で作成するので、全部で9種類となります。
共通のHTMLコード
それでは解説していきますが、HTMLの書き方は共通でこちらになります。
<header class="header">
<nav class="header-nav">
<ul class="header-list">
<li class="header-item">
<a href="#">HOME</a>
</li>
<li class="header-item">
<a href="#">ABOUT</a>
<div class="megaMenu">
<ul class="megaMenu-list">
<li class="megaMenu-item">
<a href="#">About-01</a>
</li>
<li class="megaMenu-item">
<a href="#">About-02</a>
</li>
<li class="megaMenu-item">
<a href="#">About-03</a>
</li>
</ul>
</div>
</li>
<li class="header-item">
<a href="#">NEWS</a>
<div class="megaMenu">
<ul class="megaMenu-list">
<li class="megaMenu-item">
<a href="#">News-01</a>
</li>
<li class="megaMenu-item">
<a href="#">News-02</a>
</li>
<li class="megaMenu-item">
<a href="#">News-03</a>
</li>
</ul>
</div>
</li>
<li class="header-item">
<a href="#">CONTACT</a>
</li>
</ul>
</nav>
</header>メインメニューは4つで、メガメニューに対応しているのは、『ABOUT』と『NEWS』になります。
これから解説していきますが、コードを全部見たい人は、デモの左上にある『HTML / CSS』をクリックして下さい。
シンプルなメガメニュー（メニュー幅）
CSSの書き方はこちら。
.header {
background-color: #214b8d;
}
.header-nav {
display: flex;
justify-content: center;
}
.header-list {
display: flex;
justify-content: center;
position: relative;
}
.header-item:hover {
background-color: #19192b;
}
.header-item a {
color: #fff;
display: block;
padding: 20px;
}
.megaMenu {
background-color: #19192b;
left: 0;
opacity: 0;
position: absolute;
text-align: center;
visibility: hidden;
width: 100%;
}
.megaMenu-list {
padding-bottom: 30px;
padding-top: 30px;
}
.megaMenu-item {
display: inline-block;
}
/* メニューをhoverした時のスタイル */
.header-item:hover .megaMenu {
opacity: 1;
visibility: visible;
}メガメニューは、最初opacity: 0;で透明にしています。
しかし、それだけでは透明になっているだけでクリックできてしまうので、visibility: hidden;でクリックできないようにしています。
そして、hoverした時に opacity: 1;とvisibility: visible;で表示します。
visibility: hidden;については、以下の記事を参照下さい。
-
【CSS】display: noneとopacity: 0とvisibility: hiddenの違いを解説
続きを見る
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
シンプルなメガメニュー（画面幅）
CSSの書き方はこちら。
.header {
background-color: #214b8d;
}
.header-list {
display: flex;
justify-content: center;
}
.header-item:hover {
background-color: #19192b;
}
.header-item a {
color: #fff;
display: block;
padding: 20px;
}
.megaMenu {
background-color: #19192b;
left: 0;
opacity: 0;
position: absolute;
text-align: center;
visibility: hidden;
width: 100%;
}
.megaMenu-list {
padding-bottom: 30px;
padding-top: 30px;
}
.megaMenu-item {
display: inline-block;
}
/* メニューをhoverした時のスタイル */
.header-item:hover .megaMenu {
opacity: 1;
visibility: visible;
}
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
シンプルなメガメニュー（任意の幅）
CSSの書き方はこちら。
.header {
background-color: #214b8d;
}
.header-list {
display: flex;
justify-content: center;
}
.header-item:hover {
background-color: #19192b;
}
.header-item a {
color: #fff;
display: block;
padding: 20px;
}
.megaMenu {
background-color: #19192b;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 45px;
visibility: hidden;
width: 600px;
}
.megaMenu-list {
padding-bottom: 30px;
padding-top: 30px;
}
.megaMenu-item {
display: inline-block;
}
/* メニューをhoverした時のスタイル */
.header-item:hover .megaMenu {
opacity: 1;
visibility: visible;
}これは、メインメニューの幅より少し広くして、さらに少し上にしています。
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
このように、少し崩したデザインは結構あります。
フェードで表示されるメガメニュー（メニュー幅）
『シンプルなメガメニュー（メニュー幅）』とCSSの違いは、こちらです。
.header-item {
transition: background-color .3s;
}
.megaMenu {
transition: opacity .3s, visibility .3s;
}このコードを追記して、フェードさせます。
.header-itemはメインメニューの方です。
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
フェードで表示されるメガメニュー（画面幅）
『シンプルなメガメニュー（画面幅）』とCSSの違いは、先ほどのメニュー幅のフェードと同じです。
.header-item {
transition: background-color .3s;
}
.megaMenu {
transition: opacity .3s, visibility .3s;
}
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
フェードで表示されるメガメニュー（任意の幅）
『シンプルなメガメニュー（任意幅）』とCSSの違いは、先ほどのメニュー幅のフェードと同じです。
.header-item {
transition: background-color .3s;
}
.megaMenu {
transition: opacity .3s, visibility .3s;
}
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
上からスライドで表示されるメガメニュー（メニュー幅）
CSSは、これまでと少し変わります。
変わるのはメガメニューの部分だけですが、こちらになります。
.megaMenu {
background-color: #19192b;
height: 0;
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
transition: height .3s;
width: 100%;
}
/* メニューをhoverした時のスタイル */
.header-item:hover .megaMenu {
height: 116px; /* メガメニューの高さ */
}今回は最初に透過させるのではなく、height: 0;で高さを0にしているので、opacity: 0;とvisibility: hidden;はありません。
そしてメニューをhoverしたら、指定した高さになります。
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
上からスライドで表示されるメガメニュー（画面幅）
メガメニューのCSSは、先ほどの『上からスライドで表示されるメガメニュー（メニュー幅）』と同じです。
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
上からスライドで表示されるメガメニュー（任意の幅）
これも追記・削除するCSSは、これまでのスライドで表示されるメガメニューと同じです。
サンプル（デモ）
サンプルはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は、HTML・CSSだけで作るメガメニューをご紹介しました。
JavaScriptやjQueryは不要なので、割と簡単に作れるかと思いますが、実務ではデザイン通りにするためにCSSを調整する必要があると思います。
今回ご紹介したサンプル（デモ）を元にして、デザイン通りにコーディングしてみましょう。
以上になります。
