【CSSだけ】メガメニューを簡単に作る方法【コピペOK】

こんにちは、ゆうが(@yuuuugablog)です。

今回は、メガメニューを作る方法を解説していきます。

メガメニューってなんですか？

悩んでる人

メガメニューとは？

メガメニューとはドロップダウンメニューのスペースを拡大して、情報量を増やしたメニューのことです。

イメージがわかないと思うので、完成イメージをご覧ください。

完成イメージ

つまりメガメニューとは上記のようなもので、スペースが広いのが特徴です。
※マウスホバーをするとメニューが表示されます。

ゆうが

かなりweb制作には使われるので、今回はメガメニューを作る方法を解説していきます。コピペでできるので初心者でも大丈夫ですよ。

本記事のもくじ

メガメニューのHTML
メガメニューのCSS
BoostNoteの保存しておくと、爆速で作業できる

メガメニューのHTML

HTML

<nav>
      <ul class="header__menu">
        <li class="mega__menu">
          <a href="#">MEGA</a>
          <ul class="mega__menu-second">
            <li><a href="#">CHILD MENU</a></li>
          </ul>
        </li>
        <li class="mega__menu">
          <a href="#">MEGA</a>
          <ul class="mega__menu-second">
            <li><a href="#">CHILD MENU</a></li>
          </ul>
        </li>
        <li class="mega__menu">
          <a href="#">MEGA</a>
          <ul class="mega__menu-second">
            <li><a href="#">CHILD MENU</a></li>
          </ul>
        </li>
        <li class="mega__menu">
          <a href="#">MEGA</a>
          <ul class="mega__menu-second">
            <li><a href="#">CHILD MENU</a></li>
          </ul>
        </li>
      </ul>
    </nav>

MEMO

aタグの文字（ここではMEGA）を変えることで、自分の好きな文字に置き換えられます。

メガメニューのCSS

CSS

.header__menu {
  position: relative;
  width: 80%;
  background: #000; /* メニューの背景色 */
  text-align: center;
  list-style: none;
  padding: 0;
}
.header__menu li {
  display: inline-block;
  padding: 1em 5em;
}

.header__menu li a {
  color: #fff; /* メニューの文字色 */
  text-decoration: none;
}

.header__menu li a:hover {
  color: #426dd8; /* ホバーした時の文字色 */
  border-bottom: 2px solid #426dd8; /* 下線 なしにする場合は削除する*/
}

ul.mega__menu-second {
  visibility: hidden;
  opacity: 0;
}

.header__menu li:hover {
  background: #570f76; /* メニューの背景色 */
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

li.mega__menu ul.mega__menu-second {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  background: #570f76; /* メガメニューの背景色 */
  padding: 20px;
  box-sizing: border-box;

  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

li.mega__menu:hover ul.mega__menu-second {
  top: 51px;
  visibility: visible;
  opacity: 1;
}

MEMO

色の変更をする際には、backgroundの部分を「white」や「green」にすることで変更できます。

たったこれだけで、メガメニューが簡単に作ることができます。あとは自分の好きなようにカラーや文字を変更すればOKです！