実装内容

メニューの「取り扱い保険」をホバーすると、メガメニューが表示され、黒色のガバーで全体が覆われます。この状態では、ロゴとメニュー以外は見えなくなります。
このような実装になります。

コードの解説

※こちらはサンプルコードの解説になります。ぜひ上記のサンプルコードをダウンロードください。

ポイント解説
・z-indexを使用して調整する。本件では、高　メニュー/ロゴ → カバー　→ body　小　となる。
・本件では、メガメニューの表示CSSのホバーアニメーションで実装すると同時に、Javascriptでカバーを表示するイベントを発火している。

具体的なコードを見ていきましょう。

SCSS

// z-indexで調整
.content__cover {
  background-color: $cBlack;
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: 1s;
  visibility: hidden;
  width: 100%;
  z-index: 1;
  /* 重要 */
}

.header__logo {
  z-index: 2;
  /* 重要 */
}

li {
    &.header-menu__list {
      z-index: 2;
      /* 重要 */
      color: $cWhite;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;

      &:hover {
        .header-mega {
          transition: 0.5s;
          visibility: visible;
          opacity: 1;
        }
      }
    }
}

カバー・ロゴ・リストそれぞれにz-indexを指定します。
リストにはホバーアニメーションを設定します。

HTML

<nav class="header__nav lg-block">
  <ul class="flex-row">
    <li>
      <a class="menu__a" href="about.html">私たちについて</a>
    </li>

    <!-- メガメニュー -->
    <li class="header-menu__list flex-column">
      取り扱い保険

      <div class="header-mega flex-column absolute">
        <ul class="flex-row">
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
        </ul>

        <ul class="flex-row">
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
        </ul>
      </div>
      <!-- /.flex-column -->
    </li>
    <!-- /.header-menu__list -->

    <li><a class="menu__a" href="recruit.html">採用情報</a></li>
    <li><a class="menu__a" href="news.html">お知らせ</a></li>
    <li class="contact">
      <a class="menu__a" href="contact.html">
        <span class="fw-bold">お問い合わせ</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /.header__nav -->

メガメニューは、親子関係を作る必要があります。具体的には、ul要素の中にさらにul要素を設定し、ホバーアニメーションが正しく機能するように設定しています。

Javascript

export class Onclick {
  constructor() {
    this.DOM = {};
    this.DOM.container = document.querySelector("#global-container");
    this._megaMenu();
  }

  // メガメニュー
  _megaMenu() {
    const cover = document.querySelector(".content__cover");
    const list = document.querySelector(".header-menu__list");

    list.addEventListener("mouseover", () => {
      cover.style.opacity = 1;
      cover.style.visibility = "visible";
    });
    list.addEventListener("mouseout", () => {
      cover.style.opacity = 0;
      cover.style.visibility = "hidden";
    });
  }
}