Bootstrap 5のドロップダウンメニューの使い方

基本的なドロップダウンメニューの作成 Bootstrap 5では、ドロップダウンメニューを作成するために<div>要素と<button>要素を使用します。以下は基本的なコード例です。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">メニュー項目1</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目2</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目3</a></li>
  </ul>
</div>

ドロップダウンメニューの位置調整ドロップダウンメニューを右寄せや上下反転させることもできます。以下のコード例では、右寄せと上下反転の方法を示しています。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">メニュー項目1</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目2</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目3</a></li>
  </ul>
</div>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu dropdown-menu-up" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">メニュー項目1</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目2</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目3</a></li>
  </ul>
</div>

ドロップダウンメニューのトグルドロップダウンメニューを開いたり閉じたりするためのトグルボタンのカスタマイズも可能です。以下のコード例では、アイコンを使用したトグルボタンを示しています。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    <i class="bi bi-three-dots-vertical"></i>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">メニュー項目1</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目2</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目3</a></li>
  </ul>
</div>

ドロップダウンメニューのイベントハンドリングドロップダウンメニューが開かれたり閉じられたりしたときにJavaScriptで特定の処理を行いたい場合、show.bs.dropdownイベントとhide.bs.dropdownイベントを使用できます。以下のコード例では、ドロップダウンメニューが開かれたときにコンソールにメッセージを出力する方法を示しています。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">メニュー項目1</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目2</a></li>
    <li><a class="dropdown-item" href="#">メニュー項目3</a></li>
  </ul>
</div>
<script>
  var dropdown = document.querySelector('.dropdown');
  dropdown.addEventListener('show.bs.dropdown', function () {
    console.log('ドロップダウンメニューが開かれました');
  });

  dropdown.addEventListener('hide.bs.dropdown', function () {
    console.log('ドロップダウンメニューが閉じられました');
  });
</script>

以上が、Bootstrap 5のドロップダウンメニューの使い方とコード例です。これらの方法を活用して、魅力的で使いやすいドロップダウンメニューを作成してください。