ブートストラップドロップダウンメニューの実行方法

ドロップダウンメニューは、トリガー（ボタンまたはリンク）をクリックまたはホバリングすることによって表示されるオプションのリストを表示するパネルです。ブートストラップドロップダウンメニューを作成するには、次の手順が必要です。コンテナを作成し、ドロップダウンクラスを追加します。トリガー要素（ボタンまたはリンク）を追加し、Dropdown-ToggleとData-Toggle = "Dropdown"プロパティを追加します。順序付けられていないリストを作成し、ドロップダウンメニュークラスを追加します。リストにリンクまたはコンテンツを含むリスト項目を追加します。

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

ドロップダウンメニューとは何ですか？

ドロップダウンメニューは、ユーザーがクリックまたはホーバーするときにオプションのリストを含むパネルを表示するインタラクティブなコンポーネントです。

ブートストラップドロップダウンメニューを作成する方法は？

ドロップダウンメニューを作成するには、次のHTML要素が必要です。

<li> <div>コンテナは、ドロップダウンメニューをラップするために使用されます<li> <code><button></button>または<a></a>要素としてトリガーとして、ユーザーがクリックまたはホーバーするとメニューが表示されます。 <li> <ul></ul>順序付けられていないリストは、メニューオプションを含めるために使用されます <li> <li>リストアイテムは、個々のメニューオプションを表すために使用されます

ステップ：

<li> <div>コンテナを作成し、 <code>dropdownクラスを追加します。<li>コンテナ内にトリガー要素（ <button></button>または<a></a> ）を追加し、 dropdown-toggleとdata-toggle="dropdown"プロパティを追加します。 <li> <ul></ul>の順序付けられていないリストを作成し、そのリストにdropdown-menuクラスを追加します。 <li> <li>リストアイテムを<ul></ul>リストに追加し、各オプションのリンクまたはその他のコンテンツを追加します。

サンプルコード：

 <code class="html"><div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div></code>

高度なオプション：

<li> Submenu：ネストされた<ul></ul>および<li>要素を使用してサブメニューを作成します。 <li> Delimiter： <li role="separator" class="divider">を追加して、メニュー項目を分離します。 <li> タイトル： <li role="heading" class="dropdown-header">を追加してタイトルを作成します。 <li> 無効化アイテム： disabled属性を追加してメニュー項目を無効にします。

ヒント：

<li>トリガー要素にaria-haspopup="true"とaria-expanded="false"プロパティがあることを確認してください。 <li> JavaScriptを使用して、ドロップダウンメニューイベントを処理します（たとえば、メニューを表示/非表示）。 <li>ブートストラップのドキュメントとコンポーネントの例を活用して、より高度な使用法を利用してください。