使用 DXPR Theme 实现响应式多级巨型菜单.

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 技能（drush wm:setup-ai）后，智能体可以根据简介创建菜单链接并排序，例如“包含 Research、Teaching 和 Facilities 的 Services 菜单，Research 下有三个实验室”。配合 DXPR Theme 的技能（drush dxt:setup-ai），它还会设置页眉布局、粘性行为和菜单颜色以匹配品牌。您在网站上检查结果。