【JavaScript】ホバーしたらドロップダウンメニューを表示する

2025年01月20日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はグローバルナビゲーションなどでよく使うドロップダウンメニューのレシピを紹介します！

実装例

HTML例

<nav class="gnav">
  <div class="gnav-inner pos-point">
    <ul class="gnav-list">
      <li class="gnav-list__item megamenu">
        <a href="/" class="border-hover"><span>TOP</span>トップ</a>
        <div class="downMenu">
          <ul class="downMenu-list">
            <li class="downMenu-list__item">
              <a href="/about-us/">会社概要</a>
            </li>
            <li class="downMenu-list__item">
              <a href="/access/">アクセス</a>
            </li>
            <li class="downMenu-list__item">
              <a href="/contact/">お問い合わせ</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="gnav-list__item megamenu">
        <a href="/blog/"><span>BLOG</span>ブログ</a>
        <div class="downMenu">
          <ul class="downMenu-list">
            <li class="downMenu-list__item">
              <a href="/printing/">印刷事業部</a>
            </li>
            <li class="downMenu-list__item">
              <a href="/printing/business/">事業案内</a>
            </li>
            <li class="downMenu-list__item">
              <a href="/printing/product/">制作物</a>
            </li>
            <li class="downMenu-list__item">
              <a href="/printing/technical/">設備と技術</a>
            </li>
            <li class="downMenu-list__item">
              <a href="/contents/plan/">企画・編集</a>
            </li>
            <li class="downMenu-list__item">
              <a href="/contents/web/">WEB</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>

CSS例

.gnav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}
.downMenu {
  position: absolute;
  left: auto;
}
.gnav-list__item {
  text-align: center;
  list-style: none;
}
.gnav-list__item a {
  color: #fff;
  background-color: #333;
  transition: 0.4s ease;
  text-decoration: none;
}
.gnav-list__item > a {
  position: relative;
  display: block;
  padding: 22px 0 0;
  font-size: 16px;
  width: 250px;
  height: 90px;
  box-sizing: border-box;;
  transition: 0.4s ease;
  border-bottom: 0px solid transparent;
  background-position: top 25px center;
  background-repeat: no-repeat;
  background-size: auto;
}
.gnav-list__item > a span {
  color: #fff;
  display: block;
}
.gnav-list__item > a:hover {
  border-bottom: 3px solid #cc0000;
}
.gnav-list__item > a.border-hover {
  border-bottom: 3px solid #cc0000;
}
.downMenu-list{
  list-style: none;
  padding: 0;
}
.downMenu-list__item a {
  display: block;
  padding: 10px 0 0;
  width: 250px;
  height: 56px;
  font-size: 14px;
  box-sizing: border-box;
  border-top: 1px solid #323333;
  border-bottom: 0px solid transparent;
  transition: 0.2s ease;
  background-position: bottom 10px center;
  background-repeat: no-repeat;
  background-size: auto;
}

JavaScript例

document.addEventListener("DOMContentLoaded", function() {
  const megaMenus = document.querySelectorAll(".megamenu");
  megaMenus.forEach(function(megaMenu) {
    const downMenu = megaMenu.querySelector(".downMenu");
    if (downMenu) {
      downMenu.style.display = "none";
      downMenu.style.height = "0";
      downMenu.style.overflow = "hidden";
      downMenu.style.transition = "height 0.2s ease";
      megaMenu.addEventListener("mouseenter", function() {
        if (downMenu.style.display === "none" || downMenu.style.height === "0px") {
          downMenu.style.display = "block";
          downMenu.style.height = downMenu.scrollHeight + "px";
        }
      });
      megaMenu.addEventListener("mouseleave", function() {
        if (downMenu.style.display === "block" && downMenu.style.height !== "0px") {
          downMenu.style.height = "0";
          setTimeout(() => {
            downMenu.style.display = "none";
          }, 200);
        }
      });
    }
  });
});