---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
title: 'DXPR Themeのレスポンシブメガメニュー | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:33:37+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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サイトのものです。
tags:
  - 'Thema aanpassen met low-code'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T08:33:37+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': FAQPage
      mainEntity:
        -
          '@type': Question
          name: 'DXPR Themeにメガメニューモジュールは必要ですか。'
          acceptedAnswer:
            '@type': Answer
            text: '<p>いいえ。段組み、3階層、ホバーとクリックの動作、キーボード対応、モバイルメニューはテーマの機能です。必要なのは、親に<em>展開して表示</em>を設定した入れ子メニューか、メニューブロックの<em>すべてのメニューリンクを展開</em>だけです。</p>'
        -
          '@type': Question
          name: ドロップダウンがクリックでしか開かないのはなぜですか。
          acceptedAnswer:
            '@type': Answer
            text: '<p>メニュー内のどこかのドロップダウンに第3階層があるからです。テーマはメニュー全体をクリックのみに切り替え、ポインターの移動中にサブメニューが閉じないようにします。どこでもホバーを使いたい場合は構造を2階層に平坦化します。タッチ画面と幅992ピクセル未満のウィンドウでは常にクリックを使います。</p>'
        -
          '@type': Question
          name: 全幅のメガメニューレイアウトにするには。
          acceptedAnswer:
            '@type': Answer
            text: '<p>ドロップダウンに15以上の直接の子を与えます。3段組みからはヘッダーの全幅に広がります。子が8から14の場合は親リンクの下に2段組みになり、それより少ない場合は1段組みのままです。</p>'
        -
          '@type': Question
          name: 親リンクは遷移せずにドロップダウンを開けますか。
          acceptedAnswer:
            '@type': Answer
            text: '<p>はい。メニュー項目の編集時にリンクとして&lt;nolink&gt;または&lt;button&gt;を入力します。どちらもDrupalコアの機能です。親はドロップダウンを開閉するだけになり、独自のページを持ちません。</p>'
    -
      '@type': TechArticle
      headline: 'DXPR Themeのレスポンシブメガメニュー'
      description: |-
        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サイトのものです。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:33:37+0000'
      dateModified: '2026-10-24T08:33:37+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      articleSection: 'Thema aanpassen met low-code'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      description: |-
        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サイトのものです。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: ホーム
            item: 'https://dxpr.com/ja'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ja
---
[Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Theme](/hc/documentation/learn-dxpr-theme) /[Thema aanpassen met low-code](/hc/documentation/learn-dxpr-theme/thema-aanpassen-met-low-code) # DXPR Themeのレスポンシブメガメニュー.

 Learn DXPR ThemeThema aanpassen met low-code

   ## In this guide

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. 構造を作る

1. まず*構造 › メニュー › メインナビゲーション*を開きます(`/admin/structure/menu/manage/main`)。
2. 必要なリンクを*リンクを追加*で追加します。独自のページを持たない親には、リンクとして`<button>`(ネイティブのキーボードボタン)または`<nolink>`を入力します。どちらもドロップダウンを開きます。
3. 子を親の下にドラッグして1段字下げし、第3階層はさらにもう1段字下げして、**保存**を押します。
4. すべての親リンクを編集し、*展開して表示*にチェックを入れて**保存**を押します。すべての親を一括で展開するには、代わりにメインメニューブロックの設定で*すべてのメニューリンクを展開*にチェックを入れます。

設定は以上です。ドロップダウンが描画するのは最大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スキル](/drupal-agent-skills)をインストールし(`drush wm:setup-ai`)、概要(「調査・教育・施設を持つサービスメニューと、調査の下に3つの研究所」など)を渡すと、エージェントはメニューリンクを作成・整列します。DXPR Themeのスキル(`drush dxt:setup-ai`)を使えば、ブランドに合わせてヘッダーレイアウト、スティッキー動作、メニュー色も設定します。結果はサイト上で確認します。

## DXPR Themeメガメニューについての質問

### DXPR Themeにメガメニューモジュールは必要ですか。

いいえ。段組み、3階層、ホバーとクリックの動作、キーボード対応、モバイルメニューはテーマの機能です。必要なのは、親に*展開して表示*を設定した入れ子メニューか、メニューブロックの*すべてのメニューリンクを展開*だけです。

### ドロップダウンがクリックでしか開かないのはなぜですか。

メニュー内のどこかのドロップダウンに第3階層があるからです。テーマはメニュー全体をクリックのみに切り替え、ポインターの移動中にサブメニューが閉じないようにします。どこでもホバーを使いたい場合は構造を2階層に平坦化します。タッチ画面と幅992ピクセル未満のウィンドウでは常にクリックを使います。

### 全幅のメガメニューレイアウトにするには。

ドロップダウンに15以上の直接の子を与えます。3段組みからはヘッダーの全幅に広がります。子が8から14の場合は親リンクの下に2段組みになり、それより少ない場合は1段組みのままです。

### 親リンクは遷移せずにドロップダウンを開けますか。

はい。メニュー項目の編集時にリンクとして`<nolink>`または`<button>`を入力します。どちらもDrupalコアの機能です。親はドロップダウンを開閉するだけになり、独自のページを持ちません。