DXPR Themeのレスポンシブメガメニュー.
DXPR ThemeはDrupal標準のメニューシステムからメガメニューを構築します。構造 › メニューで構造を作ると、テーマはそれをドロップダウンに変えます。大きくなると段組みに分かれ、3階層まで入れ子になり、ホバーまたはクリックで開き、スマートフォンではハンバーガーメニューに折りたたまれます。メガメニューモジュールも追加設定も不要で、同じリンクがデスクトップとモバイルの両方で使われます。
このガイドはDrupal 10.3およびDrupal 11上のDXPR Theme 8.2.1以降を対象とします。スクリーンショットは、2026年10月に撮影した、DXPR Theme 8.2.2と3階層のサンプルメニューを使ったDrupal 11.4サイトのものです。
メニューの動作
- 字下げでドロップダウンに。 子を持つすべてのメニューリンクがドロップダウンになります。独自のページを持つ親には分割コントロールが付きます。リンクはページに移動し、隣のキャレットはドロップダウンを開きます。ページを持たない親は1回のクリックでドロップダウンを開きます。
- リンク数で段組みに。 直接の子が8以上あるドロップダウンは2段組みに、15以上は3段組みに、21以上は4段組みに、28以上は5段組みに分かれます。3段組みからは、ドロップダウンはヘッダーの全幅に広がり、メガメニューのレイアウトになります。
- 3階層。 ドロップダウン内のリンクはさらに子を持つことができ、親の下に字下げして展開されるため、サービス › 調査 › 研究所のような構造も平坦化せずに使えます。
- ホバーまたはクリック。 マウス付きのデスクトップでは、ドロップダウンはホバーで開き、クリックでは必ず開きます。メニュー内のいずれかのドロップダウンが第3階層を持つ場合、すべてのドロップダウンはクリックのみの動作に切り替わり、ポインターの移動中にサブメニューが閉じることがありません。タッチ画面や幅992ピクセル未満のウィンドウでは常にクリックを使います。
- キーボードとスクリーンリーダー。 方向キー、Enter、Space、Escape、Tabでメニューを移動でき、トグルは
aria-expandedで状態を示し、WAI開示ナビゲーションパターンに従います。 - 右から左に書く言語ではドロップダウンとサブメニューは反転します。
- スマートフォンとタブレット。 モバイルブレークポイント(デフォルト1200ピクセル)未満では、ヘッダーにハンバーガーアイコンが表示されます。ページ上にメニューが開き、親の隣のキャレットで子をその場で展開します。第2階層も第1階層と同様です。
1. 構造を作る
- まず構造 › メニュー › メインナビゲーションを開きます(
/admin/structure/menu/manage/main)。 - 必要なリンクをリンクを追加で追加します。独自のページを持たない親には、リンクとして
<button>(ネイティブのキーボードボタン)または<nolink>を入力します。どちらもドロップダウンを開きます。 - 子を親の下にドラッグして1段字下げし、第3階層はさらにもう1段字下げして、保存を押します。
- すべての親リンクを編集し、展開して表示にチェックを入れて保存を押します。すべての親を一括で展開するには、代わりにメインメニューブロックの設定ですべてのメニューリンクを展開にチェックを入れます。
設定は以上です。ドロップダウンが描画するのは最大3階層までです。それより深いリンクはメニューではなくページに置きます。
メニュー管理画面。子は親の下に字下げされ、第2階層の下に第3階層があります。
親リンクは、展開して表示がない場合、独自のページ上を除き、子なしで描画されます。
2. デスクトップメニューを確認する
サイトを開き、親リンクの隣のキャレットにホバーするかクリックします。ページを持たない親もクリックで開きます。メニューに第3階層がある場合、ドロップダウンはクリックのみで開きます。短い一覧は1段組みのドロップダウンで開き、長いものは段組みに広がり、3段組みからはヘッダーの全幅に広がります。順序はメニュー管理画面でのリンクの重みに段組みごとに従います。
デスクトップの「サービス」ドロップダウン。第3階層を内側に展開しています。
3. モバイルメニューを確認する
ブラウザーをモバイルブレークポイント未満に狭めるか、スマートフォンでサイトを開きます。ハンバーガーアイコンでページ上にメニューが開きます。親の隣のキャレットをタップすると子がその場で展開し、第2階層リンクの隣のキャレットで第3階層が展開します。設定は不要で、同じメニューです。
「サービス」を展開したモバイルメニュー。「調査」の隣のキャレットで第3階層が開きます。
4. ヘッダーとメニューのスタイルを設定する
見た目に関するすべてはテーマ設定のヘッダーとメインメニュータブにあります(外観から、DXPR Themeまたはサブテーマの隣の設定)。設定ページでは変更しながらライブプレビューを確認できます。
- レイアウト: 7種類のヘッダーレイアウト。ノーマル(ロゴ左、メニュー右)から中央積み重ね型やインライン型を経てロゴ右、メニュー左まで。
- ヘッダースタイル: ノーマル、または透明背景でページコンテンツ上にヘッダーを配置するオーバーレイ。ヘッダーの不透明度、高さ、ロゴの高さも設定できます。位置を固定はスクロール中もヘッダーを表示し続け、有効時はスティッキーヘッダーがスクロール量に応じてヘッダーを低い高さと独自の不透明度に切り替えます。
- メインメニューリンク: ドロップダウンの幅(自動、または100から500ピクセルの固定幅)、フォントスタイル(ノーマル、大文字、太字、リード文)、リンクの間隔、ホバースタイル(不透明度、背景色、文字色、境界線。上または下で、左・右・中央からのスライドインまたは上からのフェードイン)。
- モバイルヘッダーとモバイルメニューオプション: モバイルブレークポイント(常にモバイルヘッダーを使うには最大値4100に設定)、モバイルヘッダーの高さと位置、ハンバーガーアイコン(3本線または2本線)、そのアニメーション、メニューの配置。
- カスタムヘッダーカラー: 16色の選択肢。ナビバー、ヘッダーブロック、メニュー、ドロップダウン、モバイルメニューの背景と文字、さらに後ろ3つのホバー背景と文字を、テーマパレットから選ぶかカスタム値で設定します。
すべての変更はCSSではなく設定のため、テーマ更新後も残ります。サブテーマは独自の設定を持つため、これらの変更はサブテーマの設定ページで行います。
Better Mega Menuや他のメニューモジュールからの移行
モジュールをアンインストールし、コアのメインナビゲーションブロックをテーマのナビゲーション(折りたたみ可能)リージョンに配置します(まだない場合)。このリージョンは、小画面でハンバーガーメニューが折りたたまれる先です。モジュールが設定で行っていたこと(段組み、階層、ホバー、モバイルメニュー)はすべて、DXPR Themeがメニュー構造から行います。引き継がれないのは、画像やテキストブロックなどドロップダウン内のコンテンツです。それらはメニューがリンクするランディングページに配置します。
メニュー構築はAIエージェントに任せる
メニューは階層付きのリンク一覧であり、コーディングエージェントが得意とする構造化された作業です。Drush Webmasterスキルをインストールし(drush wm:setup-ai)、概要(「調査・教育・施設を持つサービスメニューと、調査の下に3つの研究所」など)を渡すと、エージェントはメニューリンクを作成・整列します。DXPR Themeのスキル(drush dxt:setup-ai)を使えば、ブランドに合わせてヘッダーレイアウト、スティッキー動作、メニュー色も設定します。結果はサイト上で確認します。