---
url: 'https://dxpr.com/zh-hans/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:15:18+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Theme 的巨型菜单基于 Drupal 自带的菜单系统构建。您在结构 › 菜单下创建结构，主题将其变为下拉菜单：变长时分成多列，可嵌套三级，悬停或点击展开，在手机上收进汉堡菜单。无需巨型菜单模块，无需额外配置，同一组链接同时服务桌面端和移动端。
          本指南适用于 Drupal 10.3 和 Drupal 11 上的 DXPR Theme 8.2.1 或更高版本。截图来自安装了 DXPR Theme 8.2.2 的 Drupal 11.4 网站，使用三级示例菜单，拍摄于 2026 年 10 月。
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:15:18+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>不需要。分列、三级、悬停和点击行为、键盘支持以及移动端菜单都来自主题。您只需要一个嵌套菜单，在父项上勾选<em>显示为展开</em>，或<em>展开所有菜单链接</em>（位于菜单区块上）。</p>'
        -
          '@type': Question
          name: 为什么我的下拉菜单只能点击展开？
          acceptedAnswer:
            '@type': Answer
            text: '<p>因为菜单中某个下拉菜单有第三级。主题随后将整个菜单切换为只能点击展开，以免指针移向子菜单时子菜单关闭。如果希望处处悬停即开，请将结构拍平为两级。触屏和窄于 992 像素的窗口始终使用点击。</p>'
        -
          '@type': Question
          name: 如何实现全宽巨型菜单布局？
          acceptedAnswer:
            '@type': Answer
            text: '<p>为下拉菜单添加 15 个或更多直接子项。从三列起，它撑满页眉的整个宽度。有 8 到 14 个子项时，在父链接下显示两列；更少则保持单列。</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 自带的菜单系统构建。您在结构 › 菜单下创建结构，主题将其变为下拉菜单：变长时分成多列，可嵌套三级，悬停或点击展开，在手机上收进汉堡菜单。无需巨型菜单模块，无需额外配置，同一组链接同时服务桌面端和移动端。
                本指南适用于 Drupal 10.3 和 Drupal 11 上的 DXPR Theme 8.2.1 或更高版本。截图来自安装了 DXPR Theme 8.2.2 的 Drupal 11.4 网站，使用三级示例菜单，拍摄于 2026 年 10 月。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:15:18+0000'
      dateModified: '2026-10-24T08:15:18+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/zh-hans/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/zh-hans/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      description: |-
        DXPR Theme 的巨型菜单基于 Drupal 自带的菜单系统构建。您在结构 › 菜单下创建结构，主题将其变为下拉菜单：变长时分成多列，可嵌套三级，悬停或点击展开，在手机上收进汉堡菜单。无需巨型菜单模块，无需额外配置，同一组链接同时服务桌面端和移动端。
                本指南适用于 Drupal 10.3 和 Drupal 11 上的 DXPR Theme 8.2.1 或更高版本。截图来自安装了 DXPR Theme 8.2.2 的 Drupal 11.4 网站，使用三级示例菜单，拍摄于 2026 年 10 月。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/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 自带的菜单系统构建。您在*结构 › 菜单*下创建结构，主题将其变为下拉菜单：变长时分成多列，可嵌套三级，悬停或点击展开，在手机上收进汉堡菜单。无需巨型菜单模块，无需额外配置，同一组链接同时服务桌面端和移动端。

本指南适用于 Drupal 10.3 和 Drupal 11 上的 DXPR Theme 8.2.1 或更高版本。截图来自安装了 DXPR Theme 8.2.2 的 Drupal 11.4 网站，使用三级示例菜单，拍摄于 2026 年 10 月。

## 菜单的行为方式

- **按缩进生成下拉菜单。**每个有子项的菜单链接都会变成下拉菜单。有自己页面的父项采用分离控件：链接负责跳转，旁边的插入符负责展开下拉菜单。没有页面的父项单击即可展开下拉菜单。
- **按链接数量分列。**直接子项达到 8 个或更多的下拉菜单分成 2 列，15 个或更多分成 3 列，21 个或更多分成 4 列，28 个或更多分成 5 列。从 3 列起，下拉菜单撑满页眉的整个宽度，即巨型菜单布局。
- **三级。**下拉菜单中的链接可以有自己的子项。它们在下拉菜单内展开，缩进显示在父项之下，因此 Services › Research › Laboratories 这样的结构无需拍平即可使用。
- **悬停或点击。**在带鼠标的桌面端，下拉菜单悬停即开，点击也一定能开。当菜单中某个下拉菜单有第三级时，所有下拉菜单都切换为只能点击展开，以免指针移向子菜单时子菜单关闭。触屏和窄于 992 像素的窗口始终使用点击。
- **键盘和读屏软件。**方向键、回车、空格、Esc 和 Tab 在菜单中移动，开关用`aria-expanded`向外界公开其状态，遵循 WAI 展开式导航模式。
- **从右向左书写的语言**使用镜像的下拉菜单和子菜单。
- **手机和平板。**在移动端断点之下（默认为 1200 像素），页眉显示汉堡图标，点击后菜单覆盖在页面上展开。每个父项旁边的插入符将其子项原位展开，第二级和第一级一样。

## 1. 创建结构

1. 进入*结构 › 菜单 › 主导航*（`/admin/structure/menu/manage/main`）。
2. 用*添加链接*添加所需的链接。对于没有自己页面的父项，将链接填写为`<button>`（原生键盘按钮）或`<nolink>`；两者都会展开下拉菜单。
3. 将子项拖到父项之下，使其缩进一级，第三级再缩进一级，然后按**保存**。
4. 编辑每个父链接，勾选*显示为展开*并按**保存**。要一次展开所有父项，请改为勾选*展开所有菜单链接*（位于主菜单区块的设置中）。

配置就是这些。下拉菜单最多渲染三级；更深的链接应该放在页面中，而不是菜单里。

菜单管理页面：子项缩进在父项之下，第二级之下还有第三级。

未勾选*显示为展开*的父链接渲染时不带子项，除非在它自己的页面上。

## 2. 检查桌面端菜单

打开网站，将鼠标悬停在父链接旁边的插入符上，或点击它；没有页面的父项点击也可展开。当菜单有第三级时，下拉菜单只能点击展开。短列表以单列下拉菜单打开；长列表展开成多列，从三列起撑满页眉的整个宽度。顺序遵循菜单管理页面中链接的权重，按列排列。

桌面端的 Services 下拉菜单，第三级在其中展开。

## 3. 检查移动端菜单

将浏览器收窄到移动端断点以下，或在手机上打开网站。汉堡图标将菜单覆盖在页面上打开。轻触父项旁边的插入符将其子项原位展开，轻触二级链接旁边的插入符展开第三级。无需任何配置：就是同一个菜单。

Services 已展开的移动端菜单；Research 旁边的插入符打开第三级。

## 4. 设置页眉和菜单的样式

外观的所有设置都在*页眉与主菜单*选项卡中 (*Appearance*，然后是*Settings*（位于 DXPR Theme 或您的子主题旁边）)。更改时设置页面会显示实时预览。

- **布局**：七种页眉布局，从*普通（徽标左，菜单右）*，经居中堆叠和行内变体，到*徽标右，菜单左*。
- **页眉样式**：*普通*，或*叠加*（将页眉以透明背景置于页面内容之上），另有页眉不透明度、高度和徽标高度。**固定位置**让页眉在滚动时保持可见；开启后，**粘性页眉**在滚动偏移后将页眉切换为更小的高度和独立的不透明度。
- **主菜单链接**：*下拉宽度*（自动，或 100 到 500 像素的固定宽度）、*字体样式*（普通、大写、加粗或引导文本）、*链接间距*，以及*悬停样式*：不透明度、彩色背景、彩色文本或边框（顶部或底部，从左侧、右侧、中间滑入，或从顶部淡入）。
- **移动端页眉**和**移动端菜单选项**：移动端断点（设为最大值 4100 则始终使用移动端页眉）、移动端页眉高度和位置、汉堡图标（三线或两线）、图标动画和菜单对齐方式。
- **自定义页眉颜色**：十六种颜色选择，导航栏、页眉区块、菜单、下拉菜单和移动端菜单的背景和文本，以及后三者的悬停背景和文本，每个都从主题调色板中选取或设为自定义值。

每项更改都是设置而非 CSS，因此在主题更新后依然有效。子主题有自己的设置，因此请在子主题的设置页面中进行这些更改。

## 从 The Better Mega Menu 或其他菜单模块迁移过来

卸载该模块，如果核心*主导航*区块尚未放置，请将其放入主题的*导航（可折叠）*区域；小屏幕上汉堡菜单折叠的就是这个区域。模块用配置实现的一切，DXPR Theme 都从菜单结构实现：分列、层级、悬停和移动端菜单。无法迁移的是下拉菜单内的内容，例如图片或文本区块；请将它们放到菜单链接指向的落地页上。

## 让 AI 智能体为您构建菜单

菜单是带层级的链接列表，正是编码智能体擅长的结构化任务。安装[Drush Webmaster 技能](/drupal-agent-skills)（`drush wm:setup-ai`）后，智能体可以根据简介创建菜单链接并排序，例如“包含 Research、Teaching 和 Facilities 的 Services 菜单，Research 下有三个实验室”。配合 DXPR Theme 的技能（`drush dxt:setup-ai`），它还会设置页眉布局、粘性行为和菜单颜色以匹配品牌。您在网站上检查结果。

## 关于 DXPR Theme 巨型菜单的常见问题

### 使用 DXPR Theme 还需要巨型菜单模块吗？

不需要。分列、三级、悬停和点击行为、键盘支持以及移动端菜单都来自主题。您只需要一个嵌套菜单，在父项上勾选*显示为展开*，或*展开所有菜单链接*（位于菜单区块上）。

### 为什么我的下拉菜单只能点击展开？

因为菜单中某个下拉菜单有第三级。主题随后将整个菜单切换为只能点击展开，以免指针移向子菜单时子菜单关闭。如果希望处处悬停即开，请将结构拍平为两级。触屏和窄于 992 像素的窗口始终使用点击。

### 如何实现全宽巨型菜单布局？

为下拉菜单添加 15 个或更多直接子项。从三列起，它撑满页眉的整个宽度。有 8 到 14 个子项时，在父链接下显示两列；更少则保持单列。

### 父链接可以只展开下拉菜单而不跳转吗？

可以。编辑菜单项时，将链接填写为`<nolink>`或`<button>`；两者都内置于 Drupal 核心。父项随后切换其下拉菜单，不再有自己的页面。