CSSだけ！メガニューの作り方【フェード・上からスライドあり】

HTMLとCSSだけでメガメニューって作れる？

メガメニューの実装は実務でもよくありますが、1から作るとなるとちょっと面倒に感じるかも知れません。

しかし、HTMLとCSSだけで簡単に作れるので、今回はその方法をサンプルを使って解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

メガメニューとは？

メガメニューはドロップダウンメニューと似ていますが、メガメニューはクリックまたはマウスオーバーで開くドロップダウンメニューの一種です。

通常のドロップダウンメニューと比べて広いスペースを確保することで、階層化したページをグループごとに表示したり、写真やアイコンを使ったユーザビリティの高いメニューが作れるのが特徴です。

ドロップダウンメニューの作り方については、以下の記事を参照下さい。

CSSのみのメガニューの作り方

今回ご紹介するメガメニューは、レスポンシブは考慮していません。

開くメニューも最小限のものなので、実際にはもう少し複雑になるかと思います。

それでは解説していきますが、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はこちら。

.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.