Web BENTO JS
カテゴリ一覧
ドロップダウン

04 / DROPDOWN 12 パーツ

JSドロップダウンメニュー実装 12選

Q: コピーしたドロップダウンはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

Q: 外側クリックで閉じる処理はどう実装していますか？

document への click リスナーを1回だけ登録し、クリックされた場所がドロップダウンの内側かどうかを closest() で判定しています。複数設置してもコードを2回貼っても、リスナーが増えて競合することはありません。Escキーでも閉じられます。

Q: スマホなどのタッチデバイスでも使えますか？

使えます。ホバー展開タイプは matchMedia('(hover: hover)') でホバーできない環境を判定し、自動的にタップ開閉へ切り替わります。その他のタイプはすべてクリック（タップ）式なので、そのまま動きます。

Q: ネイティブのselect要素とはどう使い分ければいいですか？

フォームで1つ選ぶだけならネイティブのselect要素が最適です。キーボード操作やスクリーンリーダー対応がブラウザ標準で提供されるためです。デザインの統一・検索付き・複数選択などselectでは難しい表現が必要なときにJS製を使い、値はhidden inputでフォームに渡します。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「ホバー展開（タッチはタップ）」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動くドロップダウンメニューのサンプル集です。プレビューは実際にクリックやホバーで開閉できます。すべて外側クリック・Escキーで閉じる処理込みです。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。

該当するパーツが見つかりませんでした。

ベーシック

<div class="bnto-dd" data-bnto-dd>
  <button type="button" class="bnto-dd-btn">
    メニュー
    <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-dd-menu">
    <a href="#">項目1</a>
    <a href="#">項目2</a>
    <a href="#">項目3</a>
  </div>
</div>

.bnto-dd {
  --c1: hsl(202 73% 50%);  /* アクセント色 */
  --dur: .25s;              /* 開閉スピード */
  position: relative; display: inline-block;
}
.bnto-dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-dd-btn .ar { transition: transform var(--dur); }
.bnto-dd.is-open .bnto-dd-btn .ar { transform: rotate(180deg); }
/* メニュー本体（ボタンの下に浮かせる） */
.bnto-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 190px; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-dd.is-open .bnto-dd-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-dd-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: #1D2A36; text-decoration: none; font-weight: 700;
}
.bnto-dd-menu a:hover { background: #EAF2F8; color: var(--c1); }

// data-bnto-dd を自動検出して初期化（複数設置OK・二重実行OK）
(function () {
  document.querySelectorAll('[data-bnto-dd]').forEach(function (dd) {
    if (dd.dataset.bntoInit) return;
    dd.dataset.bntoInit = '1';
    var btn = dd.querySelector('.bnto-dd-btn');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    btn.addEventListener('click', function () {
      var open = dd.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
    });
  });
  // 外側クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoDdDoc) return;
  document.documentElement.dataset.bntoDdDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-dd].is-open').forEach(function (dd) {
      if (dd === except) return;
      dd.classList.remove('is-open');
      dd.querySelector('.bnto-dd-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-dd]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

外側クリックとEscキーで閉じる処理まで込みの基本形です。メニューを右揃えにしたいときは .bnto-dd-menu の left: 0 を right: 0 に変えるだけです。

ホバー展開（タッチはタップ）

<div class="bnto-dd2" data-bnto-dd-hover>
  <button type="button" class="bnto-dd2-btn">
    ホバーで開く
    <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-dd2-menu">
    <a href="#">項目1</a>
    <a href="#">項目2</a>
    <a href="#">項目3</a>
  </div>
</div>

.bnto-dd2 {
  --c1: hsl(150 58% 42%); --dur: .25s;
  position: relative; display: inline-block;
}
.bnto-dd2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-dd2-btn .ar { transition: transform var(--dur); }
.bnto-dd2.is-open .bnto-dd2-btn .ar { transform: rotate(180deg); }
.bnto-dd2-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 190px; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
/* ボタンとメニューの隙間でホバーが切れないよう透明ブリッジ */
.bnto-dd2-menu::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -10px; height: 10px;
}
.bnto-dd2.is-open .bnto-dd2-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-dd2-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: #1D2A36; text-decoration: none; font-weight: 700;
}
.bnto-dd2-menu a:hover { background: #EAF2F8; color: var(--c1); }

// PCはホバー、タッチ端末は自動でタップ開閉に切り替え
(function () {
  var canHover = window.matchMedia('(hover: hover)').matches;
  document.querySelectorAll('[data-bnto-dd-hover]').forEach(function (dd) {
    if (dd.dataset.bntoInit) return;
    dd.dataset.bntoInit = '1';
    var btn = dd.querySelector('.bnto-dd2-btn');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    function set(open) {
      dd.classList.toggle('is-open', open);
      btn.setAttribute('aria-expanded', open);
    }
    if (canHover) {
      dd.addEventListener('mouseenter', function () { set(true); });
      dd.addEventListener('mouseleave', function () { set(false); });
    } else {
      btn.addEventListener('click', function () {
        set(!dd.classList.contains('is-open'));
      });
    }
  });
  // タッチ端末用：外側タップ / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoDdHoverDoc) return;
  document.documentElement.dataset.bntoDdHoverDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-dd-hover].is-open').forEach(function (dd) {
      if (dd === except) return;
      dd.classList.remove('is-open');
      dd.querySelector('.bnto-dd2-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-dd-hover]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

ホバー式の弱点である「ボタンとメニューの隙間で閉じてしまう」問題は、透明の ::before ブリッジで解決済みです。タッチ端末では matchMedia('(hover: hover)') の判定で自動的にタップ開閉になります。

カスタムセレクト風

<!-- 選んだ値は hidden input に入るのでフォーム送信OK -->
<div class="bnto-sel" data-bnto-select>
  <button type="button" class="bnto-sel-btn">
    <span class="label">サイズを選択</span>
    <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-sel-menu">
    <button type="button" class="op" data-value="s">S サイズ</button>
    <button type="button" class="op" data-value="m">M サイズ</button>
    <button type="button" class="op" data-value="l">L サイズ</button>
  </div>
  <input type="hidden" name="size" value="">
</div>

.bnto-sel {
  --c1: hsl(258 47% 54%); --dur: .25s;
  position: relative; display: inline-block;
}
.bnto-sel-btn {
  display: inline-flex; align-items: center;
  justify-content: space-between; gap: 10px;
  min-width: 190px; padding: 11px 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: border-color var(--dur);
}
.bnto-sel.is-open .bnto-sel-btn { border-color: var(--c1); }
.bnto-sel-btn .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-sel.is-open .bnto-sel-btn .ar { transform: rotate(180deg); }
.bnto-sel-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: 100%; box-sizing: border-box; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-sel.is-open .bnto-sel-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-sel-menu .op {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; background: none; border: none;
  border-radius: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.bnto-sel-menu .op:hover { background: #EAF2F8; }
.bnto-sel-menu .op.is-sel { background: var(--c1); color: #fff; }

// 選んだ項目をボタンに反映し、hidden input に値をセット
(function () {
  document.querySelectorAll('[data-bnto-select]').forEach(function (sel) {
    if (sel.dataset.bntoInit) return;
    sel.dataset.bntoInit = '1';
    var btn = sel.querySelector('.bnto-sel-btn');
    var label = btn.querySelector('.label');
    var input = sel.querySelector('input[type="hidden"]');
    btn.setAttribute('aria-haspopup', 'listbox');
    btn.setAttribute('aria-expanded', 'false');
    btn.addEventListener('click', function () {
      var open = sel.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
    });
    sel.querySelectorAll('.op').forEach(function (op) {
      op.addEventListener('click', function () {
        sel.querySelectorAll('.op').forEach(function (o) { o.classList.remove('is-sel'); });
        op.classList.add('is-sel');
        label.textContent = op.textContent;
        if (input) input.value = op.dataset.value || op.textContent;
        sel.classList.remove('is-open');
        btn.setAttribute('aria-expanded', 'false');
      });
    });
  });
  // 外側クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoSelDoc) return;
  document.documentElement.dataset.bntoSelDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-select].is-open').forEach(function (sel) {
      if (sel === except) return;
      sel.classList.remove('is-open');
      sel.querySelector('.bnto-sel-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-select]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

フォーム内で使うときは hidden input の name を送信したいキー名に変更してください。単純な1択でデザインにこだわらないなら、ネイティブの <select> のほうがアクセシビリティは有利です（下のSEOコラム参照）。

ケバブメニュー（…）

<div class="bnto-kebab" data-bnto-kebab>
  <button type="button" class="bnto-kebab-btn" aria-label="その他の操作">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
  </button>
  <div class="bnto-kebab-menu">
    <button type="button">編集</button>
    <button type="button">複製</button>
    <button type="button" class="danger">削除</button>
  </div>
</div>

.bnto-kebab {
  --c1: hsl(345 80% 55%); --dur: .25s;
  position: relative; display: inline-block;
}
.bnto-kebab-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: #fff; border: 2px solid #DFE9F1; color: #5A6B7A;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color var(--dur), color var(--dur);
}
.bnto-kebab.is-open .bnto-kebab-btn { border-color: var(--c1); color: var(--c1); }
/* 右端に置くことが多いので右揃えで開く */
.bnto-kebab-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 160px; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-kebab.is-open .bnto-kebab-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-kebab-menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left; padding: 9px 12px;
  background: none; border: none; border-radius: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.bnto-kebab-menu button:hover { background: #EAF2F8; }
/* 破壊的操作は赤で区別 */
.bnto-kebab-menu .danger { color: hsl(4 75% 52%); }
.bnto-kebab-menu .danger:hover { background: hsl(4 75% 96%); }

// ケバブメニュー：項目を押すとメニューが閉じる
(function () {
  document.querySelectorAll('[data-bnto-kebab]').forEach(function (kb) {
    if (kb.dataset.bntoInit) return;
    kb.dataset.bntoInit = '1';
    var btn = kb.querySelector('.bnto-kebab-btn');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    btn.addEventListener('click', function () {
      var open = kb.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
    });
    kb.querySelectorAll('.bnto-kebab-menu button').forEach(function (item) {
      item.addEventListener('click', function () {
        kb.classList.remove('is-open');
        btn.setAttribute('aria-expanded', 'false');
        // ここに各項目の処理を書く（例：編集画面を開く）
      });
    });
  });
  // 外側クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoKebabDoc) return;
  document.documentElement.dataset.bntoKebabDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-kebab].is-open').forEach(function (kb) {
      if (kb === except) return;
      kb.classList.remove('is-open');
      kb.querySelector('.bnto-kebab-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-kebab]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

カード・テーブル行・コメント欄の右上に置く定番UIです。「削除」など取り返しのつかない操作は .danger で赤くして、確認ダイアログを挟むのがおすすめです。

ユーザーメニュー

<div class="bnto-user" data-bnto-usermenu>
  <button type="button" class="bnto-user-btn" aria-label="ユーザーメニュー">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
  </button>
  <div class="bnto-user-menu">
    <div class="who"><b>山田 太郎</b><span>[email protected]</span></div>
    <a href="#">プロフィール</a>
    <a href="#">設定</a>
    <div class="sep" role="separator"></div>
    <a href="#" class="out">ログアウト</a>
  </div>
</div>

.bnto-user {
  --c1: hsl(26 90% 55%); --dur: .25s;
  position: relative; display: inline-block;
}
/* 丸アバターボタン */
.bnto-user-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid #fff;
  background: var(--c1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 5px 14px rgba(0,0,0,.16);
}
.bnto-user-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 200px; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-user.is-open .bnto-user-menu { opacity: 1; visibility: visible; transform: none; }
/* ユーザー情報ヘッダー */
.bnto-user-menu .who {
  padding: 8px 12px 10px;
  border-bottom: 2px dashed #DFE9F1; margin-bottom: 4px;
}
.bnto-user-menu .who b { display: block; }
.bnto-user-menu .who span { font-size: 11px; color: #9a948a; }
.bnto-user-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px;
  color: inherit; text-decoration: none; font-weight: 700;
}
.bnto-user-menu a:hover { background: #EAF2F8; }
.bnto-user-menu .sep { border-top: 2px dashed #DFE9F1; margin: 4px 0; }
.bnto-user-menu .out { color: hsl(4 75% 52%); }
.bnto-user-menu .out:hover { background: hsl(4 75% 96%); }

// ユーザーメニュー：項目クリックでも閉じる
(function () {
  document.querySelectorAll('[data-bnto-usermenu]').forEach(function (um) {
    if (um.dataset.bntoInit) return;
    um.dataset.bntoInit = '1';
    var btn = um.querySelector('.bnto-user-btn');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    btn.addEventListener('click', function () {
      var open = um.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
    });
    um.querySelectorAll('.bnto-user-menu a').forEach(function (item) {
      item.addEventListener('click', function () {
        um.classList.remove('is-open');
        btn.setAttribute('aria-expanded', 'false');
      });
    });
  });
  // 外側クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoUserDoc) return;
  document.documentElement.dataset.bntoUserDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-usermenu].is-open').forEach(function (um) {
      if (um === except) return;
      um.classList.remove('is-open');
      um.querySelector('.bnto-user-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-usermenu]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

アバターに画像を使うなら、ボタン内のsvgを <img>（width:100%; height:100%; object-fit:cover; border-radius:50%）に差し替えてください。ヘッダーの右端に置く想定でメニューは右揃えです。

チェックボックス複数選択

<!-- メニュー内をクリックしても閉じないので複数チェックできる -->
<div class="bnto-ddc" data-bnto-ddcheck>
  <button type="button" class="bnto-ddc-btn">
    タグで絞り込み
    <span class="num"></span>
    <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-ddc-menu">
    <label><input type="checkbox" value="html">HTML</label>
    <label><input type="checkbox" value="css">CSS</label>
    <label><input type="checkbox" value="js">JavaScript</label>
  </div>
</div>

.bnto-ddc {
  --c1: hsl(187 63% 42%); --dur: .25s;
  position: relative; display: inline-block;
}
.bnto-ddc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: border-color var(--dur);
}
.bnto-ddc.is-open .bnto-ddc-btn { border-color: var(--c1); }
/* 選択数バッジ（0件のときは自動で消える） */
.bnto-ddc-btn .num {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--c1); color: #fff;
  font-size: 11px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
}
.bnto-ddc-btn .num:empty { display: none; }
.bnto-ddc-btn .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-ddc.is-open .bnto-ddc-btn .ar { transform: rotate(180deg); }
.bnto-ddc-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 190px; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-ddc.is-open .bnto-ddc-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-ddc-menu label {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-weight: 700; cursor: pointer;
}
.bnto-ddc-menu label:hover { background: #EAF2F8; }
.bnto-ddc-menu input { width: 16px; height: 16px; accent-color: var(--c1); margin: 0; }

// 開いたまま複数チェック。選択数をボタンのバッジに表示
(function () {
  document.querySelectorAll('[data-bnto-ddcheck]').forEach(function (dd) {
    if (dd.dataset.bntoInit) return;
    dd.dataset.bntoInit = '1';
    var btn = dd.querySelector('.bnto-ddc-btn');
    var num = btn.querySelector('.num');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    btn.addEventListener('click', function () {
      var open = dd.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
    });
    dd.addEventListener('change', function () {
      var n = dd.querySelectorAll('input:checked').length;
      num.textContent = n || '';
    });
  });
  // 外側クリック / Esc で閉じる（メニュー内のチェックでは閉じない）
  if (document.documentElement.dataset.bntoDdcheckDoc) return;
  document.documentElement.dataset.bntoDdcheckDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-ddcheck].is-open').forEach(function (dd) {
      if (dd === except) return;
      dd.classList.remove('is-open');
      dd.querySelector('.bnto-ddc-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-ddcheck]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

商品一覧の絞り込みフィルタに最適です。選択された値は dd.querySelectorAll('input:checked') で取れるので、change イベント内に絞り込み処理を足せばそのままフィルタUIになります。

2階層メニュー

<div class="bnto-dd7" data-bnto-dd-nest>
  <button type="button" class="bnto-dd7-btn">
    製品情報
    <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-dd7-menu">
    <a href="#">新着アイテム</a>
    <!-- サブメニュー付き項目 -->
    <div class="has-sub">
      <button type="button">カテゴリ
        <svg class="ar2" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
      </button>
      <div class="sub">
        <a href="#">トップス</a>
        <a href="#">ボトムス</a>
      </div>
    </div>
    <a href="#">ランキング</a>
  </div>
</div>

.bnto-dd7 {
  --c1: hsl(41 100% 47%); --dur: .25s;
  position: relative; display: inline-block;
}
.bnto-dd7-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-dd7-btn .ar { transition: transform var(--dur); }
.bnto-dd7.is-open .bnto-dd7-btn .ar { transform: rotate(180deg); }
.bnto-dd7-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 150px; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-dd7.is-open .bnto-dd7-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-dd7-menu a, .bnto-dd7-menu .has-sub > button {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  background: none; border: none; border-radius: 8px;
  color: inherit; text-decoration: none; text-align: left;
  font: inherit; font-weight: 700; cursor: pointer;
}
.bnto-dd7-menu a:hover, .bnto-dd7-menu .has-sub > button:hover { background: #EAF2F8; }
.bnto-dd7 .has-sub { position: relative; }
.bnto-dd7 .has-sub > button .ar2 { color: var(--c1); }
/* サブメニューは右隣に開く */
.bnto-dd7 .sub {
  position: absolute; top: -8px; left: calc(100% + 4px);
  min-width: 140px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-dd7 .has-sub.is-open > .sub { opacity: 1; visibility: visible; transform: none; }
/* PCはホバーでも開く（タッチはクリックのみ） */
@media (hover: hover) {
  .bnto-dd7 .has-sub:hover > .sub { opacity: 1; visibility: visible; transform: none; }
}

// 2階層メニュー：サブメニューはホバー（CSS）とクリックの両対応
(function () {
  document.querySelectorAll('[data-bnto-dd-nest]').forEach(function (dd) {
    if (dd.dataset.bntoInit) return;
    dd.dataset.bntoInit = '1';
    var btn = dd.querySelector('.bnto-dd7-btn');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    btn.addEventListener('click', function () {
      var open = dd.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
      if (!open) closeSubs(dd);
    });
    dd.querySelectorAll('.has-sub > button').forEach(function (sb) {
      sb.setAttribute('aria-haspopup', 'true');
      sb.setAttribute('aria-expanded', 'false');
      sb.addEventListener('click', function () {
        var open = sb.parentElement.classList.toggle('is-open');
        sb.setAttribute('aria-expanded', open);
      });
    });
  });
  function closeSubs(dd) {
    dd.querySelectorAll('.has-sub.is-open').forEach(function (s) {
      s.classList.remove('is-open');
      s.querySelector('button').setAttribute('aria-expanded', 'false');
    });
  }
  // 外側クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoDdNestDoc) return;
  document.documentElement.dataset.bntoDdNestDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-dd-nest].is-open').forEach(function (dd) {
      if (dd === except) return;
      dd.classList.remove('is-open');
      dd.querySelector('.bnto-dd7-btn').setAttribute('aria-expanded', 'false');
      closeSubs(dd);
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-dd-nest]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

サブメニューはPCではホバー、タッチ端末ではタップで開きます。画面右端に置くと見切れるので、その場合は .sub の left を right: calc(100% + 4px) に変えて左に開かせましょう。階層は2段までが目安です。それ以上はUIの再設計を検討してください。

検索付きドロップダウン

<div class="bnto-dd8" data-bnto-dd-search>
  <button type="button" class="bnto-dd8-btn">
    <span class="label">都道府県を選択</span>
    <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-dd8-menu">
    <input type="text" class="srch" placeholder="入力して絞り込み…" aria-label="項目を検索">
    <div class="bnto-dd8-list">
      <button type="button" class="op">北海道</button>
      <button type="button" class="op">東京都</button>
      <button type="button" class="op">京都府</button>
      <!-- .op を必要なだけ -->
    </div>
    <p class="none">該当なし</p>
  </div>
</div>

.bnto-dd8 {
  --c1: hsl(119 35% 45%); --dur: .25s;
  position: relative; display: inline-block;
}
.bnto-dd8-btn {
  display: inline-flex; align-items: center;
  justify-content: space-between; gap: 10px;
  min-width: 200px; padding: 11px 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: border-color var(--dur);
}
.bnto-dd8.is-open .bnto-dd8-btn { border-color: var(--c1); }
.bnto-dd8-btn .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-dd8.is-open .bnto-dd8-btn .ar { transform: rotate(180deg); }
.bnto-dd8-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: 100%; box-sizing: border-box; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-dd8.is-open .bnto-dd8-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-dd8-menu .srch {
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 10px; margin-bottom: 6px;
  border: 2px solid #DFE9F1; border-radius: 8px;
  font: inherit; outline: none;
}
.bnto-dd8-menu .srch:focus { border-color: var(--c1); }
/* 項目が多くてもスクロールで収まる */
.bnto-dd8-list { max-height: 96px; overflow-y: auto; }
.bnto-dd8-list .op {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; background: none; border: none;
  border-radius: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.bnto-dd8-list .op:hover { background: #EAF2F8; }
.bnto-dd8-menu .none { display: none; padding: 8px 10px; color: #9a948a; margin: 0; }

// 入力で項目を絞り込み。選んだ項目はボタンに反映
(function () {
  document.querySelectorAll('[data-bnto-dd-search]').forEach(function (dd) {
    if (dd.dataset.bntoInit) return;
    dd.dataset.bntoInit = '1';
    var btn = dd.querySelector('.bnto-dd8-btn');
    var label = btn.querySelector('.label');
    var input = dd.querySelector('.srch');
    var ops = dd.querySelectorAll('.op');
    var none = dd.querySelector('.none');
    btn.setAttribute('aria-haspopup', 'listbox');
    btn.setAttribute('aria-expanded', 'false');
    function filter() {
      var q = input.value.trim();
      var hit = 0;
      ops.forEach(function (op) {
        var show = op.textContent.indexOf(q) !== -1;
        op.style.display = show ? '' : 'none';
        if (show) hit++;
      });
      if (none) none.style.display = hit ? 'none' : 'block';
    }
    btn.addEventListener('click', function () {
      var open = dd.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
      if (open) { input.value = ''; filter(); input.focus(); }
    });
    input.addEventListener('input', filter);
    ops.forEach(function (op) {
      op.addEventListener('click', function () {
        label.textContent = op.textContent;
        dd.classList.remove('is-open');
        btn.setAttribute('aria-expanded', 'false');
      });
    });
  });
  // 外側クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoDdSearchDoc) return;
  document.documentElement.dataset.bntoDdSearchDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-dd-search].is-open').forEach(function (dd) {
      if (dd === except) return;
      dd.classList.remove('is-open');
      dd.querySelector('.bnto-dd8-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-dd-search]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

都道府県・国名・タグなど選択肢が10を超えるときに効果的です。項目は .op ボタンを増やすだけでOKです。ひらがな検索に対応したいときは data-kana="とうきょうと" のような属性を足して判定に含めると親切です。

メガメニュー

<!-- パネルは nav の幅いっぱいに開く。列（.col）は増減OK -->
<nav class="bnto-mega" data-bnto-mega>
  <span class="brand">LOGO</span>
  <button type="button" class="bnto-mega-btn">
    製品
    <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-mega-panel">
    <div class="col">
      <p class="ttl">見出し1</p>
      <a href="#">項目1</a>
      <a href="#">項目2</a>
    </div>
    <div class="col">
      <p class="ttl">見出し2</p>
      <a href="#">項目3</a>
      <a href="#">項目4</a>
    </div>
  </div>
</nav>

.bnto-mega {
  --c1: hsl(222 70% 55%); --dur: .25s;
  position: relative; display: flex;
  align-items: center; gap: 10px;
  padding: 9px 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px;
}
.bnto-mega .brand { font-weight: 900; color: var(--c1); }
.bnto-mega-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: none; border: none; border-radius: 9px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.bnto-mega.is-open .bnto-mega-btn { background: #EAF2F8; color: var(--c1); }
.bnto-mega-btn .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-mega.is-open .bnto-mega-btn .ar { transform: rotate(180deg); }
/* 大型パネル（navの幅いっぱいに開く） */
.bnto-mega-panel {
  position: absolute; top: calc(100% + 8px);
  left: 0; right: 0; z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 列数はここで調整 */
  gap: 12px; padding: 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-mega.is-open .bnto-mega-panel { opacity: 1; visibility: visible; transform: none; }
/* 列の見出し */
.bnto-mega-panel .ttl {
  margin: 0 0 4px; padding: 0 8px;
  font-size: 11px; font-weight: 900;
  color: var(--c1); letter-spacing: .06em;
}
.bnto-mega-panel a {
  display: block; padding: 6px 8px; border-radius: 7px;
  color: #1D2A36; text-decoration: none; font-weight: 700;
}
.bnto-mega-panel a:hover { background: #EAF2F8; color: var(--c1); }
/* 動きを控えたい設定のユーザーには即時表示 */
@media (prefers-reduced-motion: reduce) {
  .bnto-mega { --dur: 0s; }
}

// メガメニュー：クリック開閉＋外側クリック / Esc で閉じる
(function () {
  document.querySelectorAll('[data-bnto-mega]').forEach(function (mg) {
    if (mg.dataset.bntoInit) return;
    mg.dataset.bntoInit = '1';
    var btn = mg.querySelector('.bnto-mega-btn');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    btn.addEventListener('click', function () {
      var open = mg.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
    });
  });
  // 外側クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoMegaDoc) return;
  document.documentElement.dataset.bntoMegaDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-mega].is-open').forEach(function (mg) {
      if (mg === except) return;
      mg.classList.remove('is-open');
      mg.querySelector('.bnto-mega-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-mega]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

項目数の多いコーポレートサイトやECのグローバルナビの定番です。デモは縮小表示ですが、実サイトではヘッダーの nav の幅いっぱいにパネルが開きます。列数は grid-template-columns: repeat(3, 1fr) のように変更でき、リンクが多いときは見出し（.ttl）でグループ分けすると迷いません。

この枠内で右クリック

右クリックコンテキストメニュー

<!-- .bnto-ctx-area 内の右クリックで独自メニューが開く -->
<div class="bnto-ctx" data-bnto-contextmenu>
  <div class="bnto-ctx-area">この枠内で右クリック</div>
  <div class="bnto-ctx-menu">
    <button type="button">コピー</button>
    <button type="button">名前を変更</button>
    <button type="button" class="danger">削除</button>
  </div>
</div>

.bnto-ctx {
  --c1: hsl(230 60% 55%);  /* アクセント色 */
  --dur: .15s;              /* 表示アニメの長さ */
  position: relative;
}
/* 右クリックを受け付けるエリア */
.bnto-ctx-area {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; padding: 10px; box-sizing: border-box;
  background: #fff; border: 2px dashed #DFE9F1;
  border-radius: 14px;
  font-weight: 700; color: #5A6B7A; user-select: none;
}
/* メニューは画面基準（position: fixed）でカーソル位置に出す */
.bnto-ctx-menu {
  position: fixed; z-index: 50; min-width: 150px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  display: none;
}
.bnto-ctx-menu.is-open { display: block; animation: bntoCtxPop var(--dur); }
@keyframes bntoCtxPop { from { opacity: 0; transform: scale(.95); } }
.bnto-ctx-menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; background: none; border: none;
  border-radius: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.bnto-ctx-menu button:hover { background: #EAF2F8; color: var(--c1); }
/* 破壊的操作は赤で区別 */
.bnto-ctx-menu .danger { color: hsl(4 75% 52%); }
.bnto-ctx-menu .danger:hover { background: hsl(4 75% 96%); color: hsl(4 75% 52%); }

// 指定エリア内の右クリックで独自メニューを表示（画面端では位置を自動調整）
(function () {
  document.querySelectorAll('[data-bnto-contextmenu]').forEach(function (ctx) {
    if (ctx.dataset.bntoInit) return;
    ctx.dataset.bntoInit = '1';
    var area = ctx.querySelector('.bnto-ctx-area');
    var menu = ctx.querySelector('.bnto-ctx-menu');
    area.addEventListener('contextmenu', function (e) {
      e.preventDefault();
      // 他のコンテキストメニューが開いていたら閉じる
      document.querySelectorAll('.bnto-ctx-menu.is-open').forEach(function (m) {
        if (m !== menu) m.classList.remove('is-open');
      });
      menu.classList.add('is-open');
      // 画面からはみ出す場合は位置を自動調整
      var host = ctx.getBoundingClientRect();
      var mw = menu.offsetWidth, mh = menu.offsetHeight;
      var x = e.clientX - host.left, y = e.clientY - host.top;
      x = Math.max(0, Math.min(x, ctx.clientWidth - mw));
      y = Math.max(0, Math.min(y, ctx.clientHeight - mh));
      menu.style.left = x + 'px';
      menu.style.top = y + 'px';
    });
    menu.querySelectorAll('button').forEach(function (item) {
      item.addEventListener('click', function () {
        menu.classList.remove('is-open');
        // ここに各項目の処理を書く（例：コピー実行）
      });
    });
  });
  // 外側クリック / 右クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoCtxDoc) return;
  document.documentElement.dataset.bntoCtxDoc = '1';
  function closeAll() {
    document.querySelectorAll('.bnto-ctx-menu.is-open').forEach(function (m) {
      m.classList.remove('is-open');
    });
  }
  document.addEventListener('click', function () { closeAll(); });
  document.addEventListener('contextmenu', function (e) {
    if (!e.target.closest('.bnto-ctx-area')) closeAll();
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll();
  });
})();

使い方のコツ

ファイル一覧やカード一覧など「編集系のUI」に向いたパーツです。メニューは position: fixed なのでスクロール中でもカーソル位置に正確に出ます。スマホには右クリックがないため、同じ操作へたどり着けるボタン（ケバブメニューなど）を併設しておくと親切です。

通知ベル

<!-- 未読は .item に .is-new を付ける。バッジの数字はJSが自動計算 -->
<div class="bnto-bell" data-bnto-notifybell>
  <button type="button" class="bnto-bell-btn" aria-label="通知を開く">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
    <span class="badge"></span>
  </button>
  <div class="bnto-bell-menu">
    <div class="head"><b>通知</b><button type="button" class="readall">すべて既読にする</button></div>
    <div class="item is-new"><b>新しいコメントが届きました</b><span>5分前</span></div>
    <div class="item is-new"><b>資料が共有されました</b><span>1時間前</span></div>
    <div class="item"><b>メンテナンスは終了しました</b><span>昨日</span></div>
  </div>
</div>

.bnto-bell {
  --c1: hsl(16 85% 55%);  /* アクセント色 */
  --dur: .25s;             /* 開閉スピード */
  position: relative; display: inline-block;
}
/* ベルボタン */
.bnto-bell-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 2px solid #DFE9F1; color: #5A6B7A;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color var(--dur), color var(--dur);
}
.bnto-bell.is-open .bnto-bell-btn { border-color: var(--c1); color: var(--c1); }
/* 未読バッジ（0件のときは自動で消える） */
.bnto-bell-btn .badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--c1); color: #fff;
  font-size: 10px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
}
.bnto-bell-btn .badge:empty { display: none; }
.bnto-bell-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 230px; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-bell.is-open .bnto-bell-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-bell-menu .head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px 8px;
  border-bottom: 2px dashed #DFE9F1; margin-bottom: 4px;
}
.bnto-bell-menu .readall {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 11px; font-weight: 800;
  color: var(--c1); cursor: pointer;
}
/* 通知1件分。未読は .is-new を付ける */
.bnto-bell-menu .item { position: relative; padding: 8px 10px 8px 24px; border-radius: 8px; }
.bnto-bell-menu .item b { display: block; font-size: 12px; }
.bnto-bell-menu .item span { font-size: 10.5px; color: #9a948a; }
.bnto-bell-menu .item::before {
  content: ""; position: absolute; left: 10px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%; background: #DFE9F1;
}
.bnto-bell-menu .item.is-new { background: #EAF2F8; }
.bnto-bell-menu .item.is-new::before { background: var(--c1); }

// 通知ベル：未読数（.is-new の数）をバッジに表示。「すべて既読にする」で消える
(function () {
  document.querySelectorAll('[data-bnto-notifybell]').forEach(function (nb) {
    if (nb.dataset.bntoInit) return;
    nb.dataset.bntoInit = '1';
    var btn = nb.querySelector('.bnto-bell-btn');
    var badge = btn.querySelector('.badge');
    var readall = nb.querySelector('.readall');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    function update() {
      var n = nb.querySelectorAll('.item.is-new').length;
      badge.textContent = n || '';
    }
    update();
    btn.addEventListener('click', function () {
      var open = nb.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
    });
    readall.addEventListener('click', function () {
      nb.querySelectorAll('.item.is-new').forEach(function (item) {
        item.classList.remove('is-new');
      });
      update();
    });
  });
  // 外側クリック / Esc で閉じる（documentへの登録は1回だけ）
  if (document.documentElement.dataset.bntoBellDoc) return;
  document.documentElement.dataset.bntoBellDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-notifybell].is-open').forEach(function (nb) {
      if (nb === except) return;
      nb.classList.remove('is-open');
      nb.querySelector('.bnto-bell-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-notifybell]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

バッジの数字は .item.is-new の数から自動計算されるので、HTML側で未読クラスを付け外しするだけで反映されます。サーバーから通知を取得する場合は、.item 要素を生成してメニューに追加し、「すべて既読にする」のクリックで既読APIを呼ぶ処理を readall のリスナーに足してください。

複数選択チップ

<!-- 選んだ項目がチップになって並ぶ。×で個別解除 -->
<div class="bnto-chip" data-bnto-chipselect>
  <div class="bnto-chip-row" aria-live="polite"></div>
  <button type="button" class="bnto-chip-btn">
    スキルを選択
    <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="bnto-chip-menu">
    <button type="button" class="op">HTML</button>
    <button type="button" class="op">CSS</button>
    <button type="button" class="op">JavaScript</button>
    <button type="button" class="op">デザイン</button>
  </div>
</div>

.bnto-chip {
  --c1: hsl(305 45% 50%);  /* チップ・アクセント色 */
  --dur: .25s;              /* 開閉スピード */
  position: relative; display: inline-block; max-width: 290px;
}
/* 選択済みチップの列（0件のときは自動で消える） */
.bnto-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bnto-chip-row:empty { display: none; }
.bnto-chip-row .chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 11px;
  background: var(--c1); color: #fff;
  border-radius: 999px; font-size: 12px; font-weight: 800;
}
/* チップの×ボタン（JSが生成） */
.bnto-chip-row .chip button {
  width: 17px; height: 17px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.28); border: none; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.bnto-chip-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: border-color var(--dur);
}
.bnto-chip.is-open .bnto-chip-btn { border-color: var(--c1); }
.bnto-chip-btn .ar { color: var(--c1); transition: transform var(--dur); }
.bnto-chip.is-open .bnto-chip-btn .ar { transform: rotate(180deg); }
.bnto-chip-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 190px; z-index: 5;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.bnto-chip.is-open .bnto-chip-menu { opacity: 1; visibility: visible; transform: none; }
.bnto-chip-menu .op {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; background: none; border: none;
  border-radius: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.bnto-chip-menu .op:hover { background: #EAF2F8; }
/* 選択済みの項目は薄くして重複選択を防ぐ */
.bnto-chip-menu .op.is-sel { opacity: .35; cursor: default; }

// 選んだ項目をチップとして表示。×で個別解除。メニューは開いたまま複数選択OK
(function () {
  document.querySelectorAll('[data-bnto-chipselect]').forEach(function (cs) {
    if (cs.dataset.bntoInit) return;
    cs.dataset.bntoInit = '1';
    var row = cs.querySelector('.bnto-chip-row');
    var btn = cs.querySelector('.bnto-chip-btn');
    btn.setAttribute('aria-haspopup', 'true');
    btn.setAttribute('aria-expanded', 'false');
    btn.addEventListener('click', function () {
      var open = cs.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open);
    });
    cs.querySelectorAll('.op').forEach(function (op) {
      op.addEventListener('click', function () {
        if (op.classList.contains('is-sel')) return;
        op.classList.add('is-sel');
        // チップを生成（×ボタン付き）
        var chip = document.createElement('span');
        chip.className = 'chip';
        chip.appendChild(document.createTextNode(op.textContent));
        var del = document.createElement('button');
        del.type = 'button';
        del.setAttribute('aria-label', op.textContent + ' を解除');
        del.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
        del.addEventListener('click', function () {
          chip.remove();
          op.classList.remove('is-sel');
        });
        chip.appendChild(del);
        row.appendChild(chip);
      });
    });
  });
  // 外側クリック / Esc で閉じる（メニュー内のクリックでは閉じない）
  if (document.documentElement.dataset.bntoChipDoc) return;
  document.documentElement.dataset.bntoChipDoc = '1';
  function closeAll(except) {
    document.querySelectorAll('[data-bnto-chipselect].is-open').forEach(function (cs) {
      if (cs === except) return;
      cs.classList.remove('is-open');
      cs.querySelector('.bnto-chip-btn').setAttribute('aria-expanded', 'false');
    });
  }
  document.addEventListener('click', function (e) {
    closeAll(e.target.closest('[data-bnto-chipselect]'));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeAll(null);
  });
})();

使い方のコツ

タグ付けやスキル選択など「複数選ぶ」入力の定番UIです。メニュー内をクリックしても閉じないので連続で選べます。フォーム送信に載せたいときは、チップ生成時に <input type="hidden" name="tags[]"> を一緒に追加し、×での解除時に削除する処理を足してください。

JSドロップダウン実装の基礎知識

ドロップダウンは、ボタンをクリック（またはホバー）するとメニューが下に開く定番UIです。ナビゲーション・操作メニュー・フォームの選択肢など使いどころが幅広い一方、「開く」より「閉じる」処理のほうが難しいのがドロップダウンの特徴です。このページのサンプルは外側クリック・Escキーで閉じる処理まで実装済み（ホバー展開型はタッチ時に同じ挙動へフォールバック）の、依存ライブラリなしのバニラJavaScriptです。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。

「外側クリックで閉じる」が使い心地を決める

メニューを開いたあと、ユーザーは「どこか別の場所をクリックすれば閉じる」と無意識に期待します。実装のコツは、documentにclickリスナーを1回だけ登録し、クリック位置がドロップダウンの内側かどうかを e.target.closest() で判定することです。個々のボタンにリスナーを増やしていく方式だと、設置数が増えるほどリスナーが乱立して競合の原因になります。あわせてEscキーで閉じる処理も入れておくと、キーボードユーザーにも快適です。

タッチデバイスへの配慮

スマホやタブレットには「ホバー」がありません。ホバー展開式のメニューをそのまま出すと、タッチユーザーは開けない・閉じられないUIになってしまいます。このページのホバー展開型は matchMedia('(hover: hover)') でホバー可能な環境かを判定し、タッチ環境では自動的にタップ開閉へフォールバックします。またホバー式は、ボタンとメニューの数ピクセルの隙間でメニューが閉じてしまう「ホバー切れ」が起きがちなので、透明の疑似要素ブリッジで隙間を埋めています。

ネイティブselectとの使い分け

「フォームで1つ選ぶだけ」なら、まずネイティブの <select> を検討してください。キーボード操作・スクリーンリーダー対応・スマホでの専用ピッカー表示など、ブラウザ標準の恩恵が非常に大きいためです。JS製のカスタムドロップダウンが活きるのは、デザインの統一・アイコン付きの項目・検索による絞り込み・チェックボックスでの複数選択など、selectでは表現できない要件があるときです。その場合も、選んだ値は hidden input に入れておけば通常のフォーム送信にそのまま乗せられます。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

コピーしたドロップダウンはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

外側クリックで閉じる処理はどう実装していますか？

document への click リスナーを1回だけ登録し、クリックされた場所がドロップダウンの内側かどうかを closest() で判定しています。複数設置してもコードを2回貼っても、リスナーが増えて競合することはありません。Escキーでも閉じられます。

スマホなどのタッチデバイスでも使えますか？

使えます。ホバー展開タイプは matchMedia('(hover: hover)') でホバーできない環境を判定し、自動的にタップ開閉へ切り替わります。その他のタイプはすべてクリック（タップ）式なので、そのまま動きます。

ネイティブのselect要素とはどう使い分ければいいですか？

フォームで1つ選ぶだけならネイティブの select 要素が最適です。キーボード操作やスクリーンリーダー対応がブラウザ標準で提供されるためです。デザインの統一・検索付き・複数選択など select では難しい表現が必要なときにJS製を使い、値は hidden input でフォームに渡します。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「ホバー展開（タッチはタップ）」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

JSドロップダウンメニュー実装 12選

ベーシック

ホバー展開（タッチはタップ）

カスタムセレクト風

ケバブメニュー（…）

ユーザーメニュー

チェックボックス複数選択

2階層メニュー

検索付きドロップダウン

メガメニュー

右クリックコンテキストメニュー

通知ベル

複数選択チップ

JSドロップダウン実装の基礎知識

「外側クリックで閉じる」が使い心地を決める

タッチデバイスへの配慮

ネイティブselectとの使い分け

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ