Bootstrap ドロップダウンメニュー

 

Bootstrap ドロップダウンメニュー

この記事では、Bootstrap 5 でドロップダウンメニューコンポーネントを使用する方法について説明します。基本的な使い方、オプション、カスタマイズなどについて説明します。

1. 基本的な使い方

ドロップダウンメニューを作成するには、以下の手順に従います。

  1. <div class="dropdown">を使用して、ドロップダウンメニューのコンテナを作成します。
  2. コンテナ内で、<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">を使用して、ドロップダウンメニューのトリガーとなるボタンを作成します。
  3. ボタンの後に、<ul class="dropdown-menu">を使用して、ドロップダウンメニューのリストを作成します。
  4. リスト内で、<li><a class="dropdown-item" href="#">を使用して、ドロップダウンメニューの項目を作成します。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu">
    <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>

2. ドロップダウンメニューのオプション

ドロップダウンメニューには、以下のオプションがあります。

オプション 説明
.dropdown-menu-start, .dropdown-menu-end ドロップダウンメニューの水平方向の配置を制御します。
.dropdown-menu-sm-start, .dropdown-menu-sm-end 小さい画面サイズ（sm ブレイクポイント以下）でのドロップダウンメニューの水平方向の配置を制御します。
<li><hr class="dropdown-divider"></li> ドロップダウンメニューの項目間に区切り線を追加します。
.disabled ドロップダウンメニューの項目を無効にします。
.active ドロップダウンメニューの項目をアクティブとしてマークします。

3. ドロップダウンメニューのカスタマイズ

ドロップダウンメニューは、以下の方法でカスタマイズできます。

  • **色:** Bootstrap のカラーユーティリティクラスを使用して、ドロップダウンメニューに異なる色を追加できます。
  • **サイズ:** .dropdown-menu-lg および .dropdown-menu-sm クラスを使用して、ドロップダウンメニューのサイズを調整できます。
  • **ドロップダウン方向:** data-bs-offset 属性または JavaScript を使用して、ドロップダウンメニューのポップアップ方向を制御できます。
  • **イベント:** JavaScript を使用して、ドロップダウンメニューの表示、非表示、表示/非表示などのイベントをリッスンできます。

4. JavaScript の使用

JavaScript を使用して、ドロップダウンメニューを操作できます。

  • Dropdown.getOrCreateInstance() を使用して、ドロップダウンメニューのインスタンスを取得します。
  • show()、hide()、および toggle() メソッドを使用して、ドロップダウンメニューの表示状態を制御します。
  • update() メソッドを使用して、ドロップダウンメニューの位置とサイズを更新します。

5. 注意事項

  • ページに Bootstrap の JavaScript ファイルがインポートされていることを確認してください。
  • 正しい HTML 構造とクラス名を使用して、ドロップダウンメニューを作成してください。
  • JavaScript を使用すると、より複雑なインタラクション効果を実現できます。

関連リソース

よくある質問

Q1: ドロップダウンメニューが正しく表示されません。

A1: ドロップダウンメニューが正しく表示されない場合は、以下の点を確認してください。

  • ページに Bootstrap の CSS と JavaScript ファイルが正しくインポートされていること。
  • 正しい HTML 構造とクラス名を使用していること。
  • JavaScript のエラーが発生していないこと。

Q2: ドロップダウンメニューの項目をクリックしても何も起こりません。

A2: ドロップダウンメニューの項目をクリックしても何も起こらない場合は、以下の点を確認してください。

  • <a> タグに href 属性が設定されていること。
  • JavaScript のイベントハンドラが正しく設定されていること。

Q3: ドロップダウンメニューをカスタマイズするにはどうすればよいですか？

A3: ドロップダウンメニューをカスタマイズするには、Bootstrap のユーティリティクラス、カスタム CSS、または JavaScript を使用できます。詳細については、Bootstrap のドキュメントを参照してください。