【JavaScript】ドロップダウンメニューを作る方法

<div class="dropdown">
  <button class="dropbtn" aria-expanded="false" aria-controls="menu">メニュー</button>
  <div id="menu" class="dropdown-content">
    <a href="#">リンク 1</a>
    <a href="#">リンク 2</a>
    <a href="#">リンク 3</a>
  </div>
</div>

.dropdown {
  position: relative;
  display: inline-block;
}
.dropbtn {
  background: #3498db; color: #fff; padding: 10px 14px;
  border: none; cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 160px; background: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content.open { display: block; } /* 開いたとき表示 */
.dropdown-content a { display: block; padding: 12px 16px; color: #333; text-decoration: none; }
.dropdown-content a:hover { background: #f1f1f1; }

const btn = document.querySelector(".dropbtn");
const menu = document.getElementById("menu");

btn.addEventListener("click", (event) => {
  event.stopPropagation(); // 「外クリック」と誤判定されないように
  const isOpen = menu.classList.toggle("open");
  btn.setAttribute("aria-expanded", String(isOpen));
});

function closeMenu() {
  menu.classList.remove("open");
  btn.setAttribute("aria-expanded", "false");
}

// メニューの外をクリックしたら閉じる
document.addEventListener("click", (event) => {
  if (!event.target.closest(".dropdown")) {
    closeMenu();
  }
});

// Escapeキーで閉じる
document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") closeMenu();
});

const items = menu.querySelectorAll("a"); // メニュー内のリンク

function openMenu() {
  menu.classList.add("open");
  btn.setAttribute("aria-expanded", "true");
  items[0]?.focus();             // 開いたら最初の項目へ
}
function closeMenu(returnFocus) {
  menu.classList.remove("open");
  btn.setAttribute("aria-expanded", "false");
  if (returnFocus) btn.focus();  // ボタンへフォーカスを戻す
}

// ボタン上で ↓ を押したら開いて項目へ
btn.addEventListener("keydown", (e) => {
  if (e.key === "ArrowDown") { e.preventDefault(); openMenu(); }
});

// メニュー内で ↑↓ 移動・Escapeで閉じる
menu.addEventListener("keydown", (e) => {
  const list = [...items];
  const i = list.indexOf(document.activeElement);
  if (e.key === "ArrowDown") { e.preventDefault(); list[Math.min(i + 1, list.length - 1)]?.focus(); }
  else if (e.key === "ArrowUp") { e.preventDefault(); list[Math.max(i - 1, 0)]?.focus(); }
  else if (e.key === "Escape") { closeMenu(true); }
});

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.dropdown-content.open {
  max-height: 300px; /* 中身が収まる十分な値 */
}