Bulmaの垂直ナビゲーションメニュー Menu [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webページでは、サイドバーにナビゲーションのメニューを配置する場合があります。

Bulmaには、垂直のナビゲーションメニューを作成できるクラスが用意されています。

今回は、ナビゲーションメニューのスタイルを設定するためのmenuクラスを紹介します。

垂直ナビゲーション用のシンプルなメニューを作成するmenuクラス

menuクラスを使用することで項目が縦に並んだメニューを作成することができます。
Bulmaのメニューでは、カテゴリーなどを表示できるラベルと、メニューのアイテムを配置するリストが作成できます。

ナビゲーションメニューのラベルには、menu-labelクラスを指定します。
メニューのリストには、menu-listクラスを指定します。

HTML

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

メニューリストの階層

Bulmaのナビゲーションメニューでは、2階層までメニューをネストすることができます。

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

HTML

メニューアイテムのアクティブ化

現在選択されているメニューのアイテムをアクティブ化(強調)することもできます。
アイテムを強調する場合は、is-activeクラスを指定します。

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

HTML

Bulma 入門 Tips 一覧