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

2026年05月07日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

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

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

以前の記事の別バージョン版なので、
参考にしていただければと思います。
過去の記事はコチラ（【JavaScript】ホバーしたらドロップダウンメニューを表示する）

実装例

HTML例

<nav class="gnav">
  <div class="gnav-inner pos-point">
    <ul class="gnav-list">
      <li class="gnav-list__item megamenu">
        <div class="button"><span>TOP</span>トップ</div>
        <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">
      <div class="button"><span>BLOG</span>ブログ</div>
        <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;
  background-color: #696969;
}
.gnav-list__item {
  text-align: center;
  list-style: none;
}
.gnav-list__item .button {
  color: #fff;
  background-color: #333;
  transition: 0.4s ease;
  text-decoration: none;
}
.gnav-list__item > .button {
  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 > .button span {
  color: #fff;
  display: block;
}
.gnav-list__item > .button::after {
  position: absolute;
  bottom: 5px;
  left: 50%;
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg)translateX(-50%);
  transition: transform 0.2s ease;
  vertical-align: middle;
}
.gnav-list__item > .button.is-open::after {
  transform: rotate(-135deg);
}
.downMenu-list{
  list-style: none;
  padding: 0;
}
.downMenu-list__item > a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 250px;
  height: 56px;
  font-size: 14px;
  text-decoration: none;
  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";
      const button = megaMenu.querySelector(".button");
      megaMenu.addEventListener("click", function() {
        const isOpen = downMenu.style.display === "block" && downMenu.style.height !== "0px";
        // 他のメニューをすべて閉じる
        megaMenus.forEach(function(other) {
          const otherMenu = other.querySelector(".downMenu");
          const otherButton = other.querySelector(".button");
          if (otherMenu && otherMenu !== downMenu) {
            otherMenu.style.height = "0";
            setTimeout(() => {
              otherMenu.style.display = "none";
            }, 200);
            if (otherButton) otherButton.classList.remove("is-open");
          }
        });
        // クリックしたメニューをトグル
        if (isOpen) {
          downMenu.style.height = "0";
          setTimeout(() => {
            downMenu.style.display = "none";
          }, 200);
          if (button) button.classList.remove("is-open");
        } else {
          downMenu.style.display = "block";
          downMenu.style.height = downMenu.scrollHeight + "px";
          if (button) button.classList.add("is-open");
        }
      });
    }
  });
});