WoodMart 超级菜单（Mega Menu）制作

一、什么是超级菜单

超级菜单（Mega Menu）是 WoodMart 对 WordPress 默认菜单的扩展功能。普通下拉菜单只能显示一列链接列表，而超级菜单可以把一个菜单项的下拉区域变成一个完整的可视化面板——里面能放多列分类链接、促销图片、产品网格、轮播横幅等。

⚙️ 1.1 超级菜单的实现原理

WoodMart 的超级菜单不是在菜单编辑器里直接搭建的，而是通过 HTML Block（HTML 块） 间接实现：

1. 先在 HTML Blocks 里用页面编辑器（Elementor / WPBakery / Gutenberg）搭建一块内容
2. 再到 外观 → 菜单 中把这块内容绑定到某个菜单项的下拉区域

👉 换句话说，超级菜单的内容设计完全在你的页面编辑器里完成，菜单编辑器只负责”把这块内容挂到哪个菜单项下面”。

🧩 1.2 五种 Design 选项

展开任意菜单项后，你会看到一个 Design 字段，它决定了下拉区域的展示方式，共五种：Default（默认）、Full width（全宽）、Full height（全高）、Set sizes（自定义尺寸）、Aside（侧边）。

🔑 关键规则：只有 Design 设为 Full width / Full height / Set sizes / Aside 时，菜单项才会出现 HTML Block for the dropdown 下拉选择框。选 Default 则没有任何超级菜单相关选项。

---

二、创建 HTML Block 作为菜单内容

这是超级菜单制作的第一步，也是最耗时的一步——你要先把下拉面板里”长什么样”设计好。

🆕 2.1 新建 HTML Block

1. 登录 WordPress 后台
2. 在左侧菜单找到 HTML Blocks，点击 Add New
3. 输入一个描述性名称，比如 超级菜单 - Shop 分类面板

4. 选择你习惯的页面编辑器（Elementor / WPBakery / Gutenberg）开始编辑

⚠️ 名称建议有辨识度。如果你有多个超级菜单，后续在菜单编辑器的下拉框里只靠名称来区分，命名 Mega Menu - Shop 比 Block 1 靠谱得多。

🧱 2.2 用 Extra Menu List 元素排列子菜单项

在 HTML Block 里，最常用的元素是 Extra Menu List（额外菜单列表）。它的作用是在超级菜单面板中排列一组子分类链接，每个子项可以单独设置文字、链接、图标。

典型布局举例——一个三列超级菜单面板：

• 第一列：Extra Menu List，放一级分类链接（如 手机 平板 笔记本）
• 第二列：Extra Menu List，放对应二级分类链接（如 手机壳 充电器 耳机）
• 第三列：一张促销横幅图片，链接到当季活动页

💾 2.3 保存 HTML Block

内容编辑完成后，点击保存（Save / Publish）。记住这一步——后面在菜单编辑器里要能选到这个 HTML Block，前提是它已经被保存过了。

💡 用 Elementor 编辑时，保存后建议确认内容已更新再退出编辑器，偶尔会遇到保存未生效的情况。

---

三、在菜单中配置超级菜单

HTML Block 准备好之后，接下来到菜单编辑器里把内容”挂”到菜单项上。

🧭 3.1 进入菜单编辑器

1. 进入 外观 → 菜单
2. 在顶部下拉中选择你要编辑的菜单（如 Main Menu），点击「选择」
3. 找到你想开启超级菜单的菜单项（如 Shop），点击右侧下拉箭头展开

🔗 3.2 设置 Design 并绑定 HTML Block

1. 在 Design 下拉中选择 Full width 或 Set sizes
2. 选 Full width：下拉区域自动铺满菜单容器宽度，适合内容列数多的情况
3. 选 Set sizes：可以手动输入宽度和高度，适合内容较少或需要精确控制的场景

2. 设置完成后，你会看到 HTML Block for the dropdown 下拉框出现
3. 在其中选择你在第二步创建的 HTML Block
4. 点击页面右下角的「保存菜单」按钮

⏳ 重要：保存菜单后，需要刷新页面，HTML Block for the dropdown 的下拉选项才会出现。如果你第一次操作时发现这个下拉框是空的，大概率是 HTML Block 没保存成功，或者菜单没保存后刷新页面。

⚠️ 3.3 避坑：不要混用普通子菜单项和超级菜单

如果你给一个菜单项设置了超级菜单（绑定了 HTML Block），同时又在这个菜单项下面用 WordPress 原生的拖拽方式添加了普通子菜单项，超级菜单可能不会显示或布局异常。

原因：超级菜单和普通子菜单是两套不同的下拉逻辑，混用时容易产生冲突。

✅ 正确做法：要么全用超级菜单（Design 设为 Full width 等 + 绑定 HTML Block），要么全用普通子菜单项（Design 设为 Default），不要两者混搭。

---

四、超级菜单的样式设置

绑定好 HTML Block 之后，菜单项还有几个样式相关的字段可以调整。

🖱️ 4.1 触发方式

Open on mouse event 控制超级菜单的展开触发方式：

• Hover（悬停）：鼠标移到菜单项上自动展开，移开后自动收起。这是最常见的交互方式
• Click（点击）：需要点击菜单项才展开，再次点击或点击页面其他区域收起

💡 移动端用户没有 hover 事件，所以即使你选了 Hover，在移动设备上也会自动切换为点击触发。不过如本文第七节所述，超级菜单在移动端本身不受支持。

🏷️ 4.2 菜单项图标与标签

除了超级菜单核心设置，菜单项本身还有以下视觉增强字段：

字段	说明
Image	上传一张图片（推荐 SVG 或 PNG），显示在菜单项文字前方
Use image as	Icon（作为图标显示在文字旁）或 Background（作为下拉区域背景图）
Icon name	填入 FontAwesome 图标关键词，如 fas fa-home
Label text	菜单项旁的小标签文字，如 New Hot Sale
Label color	标签的背景颜色

这些字段是”锦上添花”用的。超级菜单能不能正常工作，跟它们无关，但合理的图标和标签能让导航更有辨识度。

---

五、超级菜单中常用元素

超级菜单的强大之处在于 HTML Block 里可以放任何东西。以下是跨境电商独立站最常用的几种元素：

📋 5.1 Extra Menu List（额外菜单列表）

这是超级菜单里最核心的元素。它专门用于在面板中排列一组菜单链接，支持：

• 多列布局
• 每个子项单独设置文字、链接、图标
• 标题分组（先放一个标题行，下面跟一组链接）

典型用法：左侧两列各放一个 Extra Menu List 展示分类层级，右侧放促销内容。

🛍️ 5.2 产品网格与轮播

WoodMart 自带的 Products 元素可以在超级菜单面板中嵌入产品网格或轮播。可按以下方式筛选产品：

• 按分类（Category）展示
• 按”最新上架”排序
• 按”热销”排序
• 手动选择指定产品

⚠️ 产品嵌入会让超级菜单内容更丰富，但也会增加加载量。如果嵌入的产品超过 8 个，建议配合第六节的 AJAX 加载使用。

🖼️ 5.3 图片横幅

直接在 HTML Block 中放置图片元素，链接到促销活动页或分类页。这是跨境电商做节假日促销（黑五、圣诞等）最常用的方式——用户一悬停菜单就看到促销海报，点击直接进活动页。

➕ 5.4 其他可用元素

理论上 HTML Block 支持的所有元素都能放进超级菜单，常见的还有：

• 联系信息和社交链接
• 自定义 HTML 内容
• 博客文章网格
• WooCommerce 品牌列表

💡 但不要贪多。超级菜单的目的是帮用户快速找到目标页面，不是把首页塞进导航栏。内容过多反而会让用户产生选择困难，也会拖慢加载速度。

---

六、性能优化（AJAX 加载）

超级菜单的 HTML Block 内容会默认随页面一起加载。如果你的超级菜单里放了产品网格、多张图片，初始页面体积会明显增大，影响首屏加载速度。

⚡ 6.1 开启 AJAX 按需加载

在菜单项展开后的字段中，找到 Load HTML dropdown with AJAX 选项，勾选启用。

开启后的效果：

• 页面初始加载时，超级菜单的 HTML Block 内容不会加载
• 用户第一次悬停（或点击）该菜单项时，通过 AJAX 请求动态拉取内容
• 拉取完成后缓存，后续悬停不再重复请求

🤔 6.2 什么时候该开启

情况	是否建议开启
超级菜单里只有几列文字链接	不需要开启，内容量小，影响可忽略
超级菜单里嵌入了产品网格（4 个以上产品）	建议开启
超级菜单里有多张大图横幅	建议开启
站点有多个超级菜单，每个内容都不少	强烈建议全部开启

💡 官方文档建议：内容较多的超级菜单（content-heavy mega menus）推荐开启 AJAX 加载以优化性能。

---

七、移动端说明

⚠️ 这是整篇教程里最重要的一句提醒：超级菜单在移动设备上不受支持。

WoodMart 官方文档明确说明：the mega menu is not supported on mobile devices。

📱 7.1 移动端会发生什么

在移动设备上访问站点时，顶部导航会切换为移动菜单（Mobile Menu）模式。此时：

• 设置了超级菜单的菜单项不会展示 HTML Block 下拉面板
• 菜单项的普通子菜单项（如果有）会以折叠列表形式正常显示
• 如果菜单项只有超级菜单没有普通子项，移动端用户点击后只会跳转到该菜单项本身的链接

🛠️ 7.2 移动端的正确做法

针对移动端，你需要单独考虑导航体验：

1. 为关键菜单项保留普通子菜单项：在 外观 → 菜单 中，给重要分类（如 Shop）添加普通子项（各一级分类链接），这些子项在移动端会以折叠列表展开
2. 但注意第三节的避坑提示：如果你同时设了超级菜单又加了普通子项，桌面端超级菜单可能不显示。所以需要取舍——要么这个菜单项在桌面端用超级菜单、移动端用一个单独的菜单来覆盖分类导航，要么干脆不用超级菜单
3. 实际常见方案：桌面端主菜单用超级菜单做丰富展示，移动端用单独创建的 Mobile Menu 菜单，用普通多级菜单结构覆盖所有分类。两个菜单分别分配到 Main Menu 和 Mobile Menu 位置