Bulmaのドロップダウンメニュー Dropdown [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webページでは、ヘッダーやサイドバーにドロップダウンメニューを配置することがあります。
ドロップダウンメニューは、メニュバーのサブメニューの展開や、ハンバーガーメニューの展開などに利用できます。

Bulmaには、ドロップダウンメニューを実装するためのクラスが用意されているので、簡単にドロップダウンメニューを作成することができます。

今回は、ドロップダウンのスタイルを設定するdropdownクラスについて紹介します。

ドロップダウンメニューを作成するdropdownクラス

Bulmanドロップダウンはドロップダウンメニューを表示するためのトリガー(ボタン)と、メニュー部分で構成されています。
メニュー部分には、コンテンツとしてメニューアイテムと区切り線を設定します。

dropdownクラスとサブクラス

ドロップダウンメニューを構成するクラスには、以下のものがあります。

クラス 説明
dropdown ドロップダウンのメインコンテナのクラスです。
dropdown-trigger ドロップダウンメニューを表示するためのボタンのコンテナのクラスです。
dropdown-menu ドロップダウンボタンがクリックされた時に表示されるメニューのクラスです。
dropdown-content ドロップダウンメニューのコンテンツのクラスです。
dropdown-item ドロップダウンメニューのアイテムのクラスです。
dropdown-divider ドロップダウンメニューのアイテムを区切る水平線のクラスです。

ドロップダウンメニューサンプル

ドロップダウンンメニューを作成する際は、ルートとなる要素にdropdownクラスを指定し、その子要素にdropdown-triggerクラスを指定した要素と、dropdown-menuクラスを指定した要素を配置します。

HTML

dropdown-triggerクラスを指定した要素の子要素には、メニューを表示する(ドロップダウンする)ボタンを配置します。

HTML

dropdown-menuクラスを指定した要素の子要素には、dropdown-contentクラスを指定したドロップダウンメニューのコンテンツとなる要素を配置します。

HTML

dropdown-contentクラスを指定した要素の子要素には、dropdown-itemクラスを指定したメニューアイテムの要素、またはメニューアイテムの区切り線となるdropdown-dividerクラスを指定した要素を配置します。

HTML

dropdownクラスとサブクラスをすべて組み合わせると、HTMLは以下のようになります。

HTML

上記のHTMLをブラウザーで表示すると、以下のような表示になります。

Bulmaのdropdownクラスとサブクラスの実装サンプルをブラウザーで実行した結果

ドロップダウンメニューの展開

dropdownクラスを指定した要素は、そのままではドロップダウンメニューのコンテンツは表示されません。
コンテンツを表示するには、is-activeクラスを指定します。

HTML

is-activeクラスを指定することでドロップダウンメニューのコンテンツが展開されて表示されます。

Bulmaのdropdownクラスとサブクラスの実装サンプルをブラウザーで実行した結果

このis-activeクラスは、JavaScriptを使用してドロップダウンの表示を制御する際に利用します。

JavaScriptを使用せずにドロップダウンメニューを展開する場合は、is-hoverableクラスが利用できます。
is-hoverableクラスを指定すると、マウスホバーでドロップダウンメニューが展開(表示)されます。

HTML

ドロップダウンメニューアイテムのアクティブ化

ドロップダウンメニューのアイテムはis-activeクラスを指定することでアクティブ化(強調)することができます。

Bulmaのdropdownクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

上記の例では、2番目のアイテムにis-activeクラスを指定しています

ドロップダウンコンテンツ

ドロップダウンメニューのコンテンツにはa要素を配置するだけでなく、div要素などを配置して様々な形式のコンテンツを表現することができます。

Bulmaのdropdownクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ドロップダウンメニューの表示位置

通常は、ドロップダウンメニューが左揃えで表示されますが、右揃えで表示することもできます。
右揃えにする場合は、is-rightクラスを指定します。

HTML

Bulmaのdropdownクラスとサブクラスの実装サンプルをブラウザーで実行した結果

ドロップアップ

is-upクラスを使用するとドロップアップメニューとして表示することができます。

HTML

Bulmaのdropdownクラスとサブクラスの実装サンプルをブラウザーで実行した結果

Bulma 入門 Tips 一覧