CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

メガメニューとは?

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

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

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

あわせて読みたい
CSSだけでドロップダウンメニューを作る方法【4種類のサンプル付き】
CSSだけでドロップダウンメニューを作る方法【4種類のサンプル付き】

続きを見る

 

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】display: noneとopacity: 0と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だけで作るメガメニューをご紹介しました。

実務では、デザイン通りにするためにCSSを調整する必要があると思います。

今回ご紹介したデモを元にして、デザイン通りにコーディングしてみましょう。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作