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

 

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

この記事では、Bootstrap4 フレームワークでドロップダウンメニューコンポーネントを使用する方法について説明します。

---

1. ドロップダウンメニューの基本

ドロップダウンメニューは、ボタンやリンクをクリックしたときに表示される、アクションやオプションのリストです。Bootstrap4 では、以下の手順でドロップダウンメニューを作成できます。

  • <div class="dropdown">を使用して、ドロップダウンメニューのコンテナを作成します。
  • <button class="dropdown-toggle">を使用して、ドロップダウンメニューのトリガーとなるボタンを作成します。
  • <div class="dropdown-menu">を使用して、ドロップダウンメニューのリストを作成します。
  • ドロップダウンメニューのリスト内で、<a class="dropdown-item">を使用して、ドロップダウンメニューの項目を作成します。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウン
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">アクション1</a>
    <a class="dropdown-item" href="#">アクション2</a>
    <a class="dropdown-item" href="#">アクション3</a>
  </div>
</div>

2. ドロップダウンメニューの配置

デフォルトでは、ドロップダウンメニューはトリガー要素の下に表示されます。.dropdown-menu-rightクラスを使用すると、ドロップダウンメニューを右側に配置できます。


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    右側に配置
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">アクション1</a>
    <a class="dropdown-item" href="#">アクション2</a>
    <a class="dropdown-item" href="#">アクション3</a>
  </div>
</div>

3. 区切り線

<div class="dropdown-divider">を使用して、ドロップダウンメニューの項目間に区切り線を追加できます。


<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#">アクション1</a>
  <a class="dropdown-item" href="#">アクション2</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">アクション3</a>
</div>

4. メニューヘッダー

<h6 class="dropdown-header">を使用して、ドロップダウンメニューにヘッダーを追加できます。


<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <h6 class="dropdown-header">ヘッダー</h6>
  <a class="dropdown-item" href="#">アクション1</a>
  <a class="dropdown-item" href="#">アクション2</a>
</div>

5. ドロップダウンメニューの項目を無効にする

.disabledクラスを使用して、ドロップダウンメニューの項目を無効にできます。


<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#">アクション1</a>
  <a class="dropdown-item disabled" href="#">アクション2</a>
  <a class="dropdown-item" href="#">アクション3</a>
</div>

6. ドロップダウンメニューのプラグイン

Bootstrap4 のドロップダウンメニューは、JavaScript プラグインによって制御されます。プラグインを使用すると、ドロップダウンメニューの動作をカスタマイズできます。

データ属性

以下のデータ属性を使用して、ドロップダウンメニューの動作をカスタマイズできます。

データ属性 説明
data-toggle="dropdown" ドロップダウンメニューをアクティブにします。
data-display="static" マウスホバー時にドロップダウンメニューを表示します。
data-offset="10,20" ドロップダウンメニューのオフセットを設定します。

JavaScript メソッド

以下の JavaScript メソッドを使用して、ドロップダウンメニューを制御できます。

メソッド 説明
$('.dropdown-toggle').dropdown() すべてのドロップダウンメニューを初期化します。
$('.dropdown-toggle').dropdown('toggle') ドロップダウンメニューの表示状態を切り替えます。
$('.dropdown-toggle').dropdown('show') ドロップダウンメニューを表示します。
$('.dropdown-toggle').dropdown('hide') ドロップダウンメニューを非表示にします。

7. 例

以下は、ドロップダウンメニューの例です。

ボタンのドロップダウンメニュー

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウンボタン
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">アクション1</a>
    <a class="dropdown-item" href="#">アクション2</a>
    <a class="dropdown-item" href="#">アクション3</a>
  </div>
</div>
アクション1 アクション2 アクション3

関連情報

よくある質問

  1. Q: ドロップダウンメニューをクリックしても閉じないようにするにはどうすればよいですか？
    A: ドロップダウンメニューのトリガー要素に data-toggle="dropdown" 属性を追加しないでください。
  2. Q: ドロップダウンメニューを特定の要素にアタッチするにはどうすればよいですか？
    A: ドロップダウンメニューの aria-labelledby 属性を使用して、トリガー要素の ID を指定します。
  3. Q: ドロップダウンメニューのスタイルを変更するにはどうすればよいですか？
    A: ドロップダウンメニューのクラスに CSS を適用します。