创建超级菜单

WoodMart 超级菜单扩展了标准 WordPress 导航，提供包含列、图片、横幅、产品网格、分类、文本及其他页面构建器内容的宽幅下拉菜单。下拉内容以 HTML 区块的形式创建，并分配给父级菜单项。

超级菜单的工作原理

在外观 → 菜单中创建或选择一个 WordPress 菜单，并添加将打开超级菜单的父级项目。如果您在创建菜单、添加菜单项或组织父子项目时需要帮助，请参阅官方的 WordPress 外观菜单界面指南。

WoodMart 主题提供灵活的菜单显示选项，允许您创建多个菜单并将其放置在网站的任何位置。

• 主导航菜单：显示在页眉中。
• 移动端菜单：在移动设备上显示。

有关菜单位置选项的详细信息，请参阅 向网站添加菜单。

同一个菜单可以分配给这两个位置，也可以为每个位置创建单独的菜单。WoodMart 还允许您在网站的自定义位置显示菜单。

您可以使用 Gutenberg、Elementor 或 WPBakery 构建超级菜单内容，具体取决于您网站配置的页面构建器。有关可重用内容的常规介绍，请参阅 HTML 区块指南。

注意：菜单可用于桌面页眉、移动导航或其他菜单元素。菜单位置的配置与超级菜单下拉菜单是分开的。

创建超级菜单

步骤 1. 创建 HTML 区块

1. 导航至仪表盘 → HTML 区块 → 新建。
2. 为区块设置一个描述性标题。
3. 使用 Gutenberg、Elementor 或 WPBakery 创建下拉内容。
4. 发布 HTML 区块。

注意：HTML 区块必须发布后才能在选择菜单项设置中被选中。如果新发布的区块未出现在列表中，请重新加载菜单编辑器。

步骤 2. 配置父级菜单项

1. 导航至外观 → 菜单。
2. 选择要编辑的菜单。
3. 展开应打开超级菜单的父级菜单项。
4. 在设计字段中，选择全宽、全高、自定义尺寸或侧边栏。

步骤 3. 选择 HTML 区块

1. 找到下拉菜单的 HTML 区块字段。
2. 选择在步骤 1 中创建的 HTML 区块。
3. 配置任何其他下拉选项。
4. 点击保存菜单。

超级菜单设计选项

• 默认：显示标准的 WordPress 下拉菜单，不使用 HTML 区块。
• 全宽：创建一个跨越可用页眉宽度的宽幅下拉菜单。
• 全高：创建一个垂直扩展的下拉菜单，与菜单侧对齐。
• 自定义尺寸：允许您定义自定义下拉菜单尺寸。
• 侧边栏：在一侧显示导航项目，并将其下拉内容作为面板显示。您可以在 MegaMarket 演示中看到此设计。

下拉菜单的 HTML 区块字段适用于所有非默认设计。

下拉菜单设置

• 侧边栏样式：选择默认的侧边栏设计或带背景的版本。
• 下拉菜单宽度：当所选设计支持时，以像素为单位设置自定义宽度。
• 下拉菜单高度：以像素为单位设置下拉菜单的高度。
• 下拉菜单内边距：控制下拉内容周围的内部间距。
• 启用滚动：将下拉菜单限制在指定高度，并在内容超出时添加滚动。禁用时，该高度作为最小值。
• 通过 AJAX 加载 HTML 下拉菜单：在请求下拉菜单时加载分配的 HTML 区块，而不是将其包含在初始页面标记中。
• 下拉菜单配色方案：在浅色和深色方案之间切换文本和图标的颜色。
• 鼠标事件打开：在悬停或点击时打开下拉菜单。

配色方案不会自动创建背景。请选择一种与 HTML 区块或菜单项设置中配置的背景具有足够对比度的方案。

标签和图片

• 标签文本：在菜单项旁边添加一个简短的徽章，例如“新品”或“促销”。
• 标签颜色：选择徽章颜色。
• 上传图片：向菜单项添加图片。
• 图片用途：将上传的图片显示为菜单项图标或下拉菜单背景。

已弃用的选项：不要为新菜单使用图标名称（来自 FontAwesome 5 集合）字段。此选项已弃用。请上传 SVG 或 PNG 图片，并选择菜单项图标代替。

性能优化

对于包含许多产品、图片或嵌套元素的大型超级菜单，请启用通过 AJAX 加载 HTML 下拉菜单。这可以减少初始页面标记，因为 HTML 区块仅在请求下拉菜单时加载。

启用 AJAX 加载后，请在桌面和移动设备上测试菜单，以确保首次交互和所有下拉内容均按预期工作。

页面锚点和自定义 CSS 类

当菜单项应滚动到同一页面上的某个部分时，请启用页面锚点（用于单页菜单）。将菜单项 URL 设置为类似 /#contact 的值，其中 contact 与目标部分的 ID 匹配。

使用标准的 WordPress CSS 类字段向菜单项添加自定义类。如果此字段隐藏，请打开菜单屏幕顶部的显示选项并启用CSS 类。

视频教程

Gutenberg

Elementor

WPBakery