共计 7476 个字符，预计需要花费 19 分钟才能阅读完成。

在设计网站时 ，WordPress 大型菜单对于无缝导航至关重要。 对于提供多种产品类别的电子商务网站来说尤其如此。

WordPress 大型菜单可让您在多列或多行中显示菜单内容，从而轻松组织大量信息。 因此，用户可以访问网站的不同部分，而无需浏览多个页面。

在这个全面的 WordPress 教程 中，我们将向您展示如何使用插件并通过编辑代码手动添加大型菜单。 您还将找到有关最佳 WordPress 大型菜单插件的建议以及创建下拉菜单作为替代解决方案的步骤。

什么是 WordPress 超级菜单？

WordPress 大型菜单通常由几个级别组成：

• 顶级菜单 。 这是访问者登陆网站后看到的主菜单。 顶级菜单通常包含网站的主要类别或部分，例如 产品 页面。
• 二级菜单 。 当用户将鼠标悬停或单击顶级菜单项时，它将可见。 例如，时尚品牌通常将 服装 列为产品部分的二级商品之一。
• 三级菜单 。 当访问者与二级菜单交互时，这些子菜单就会出现。 例如， Clothing 的第三级项目 可以是 Shirts 、 Sweaters 和 Jackets 。

虽然可以创建更多子菜单级别，但请坚持使用三个子菜单级别以避免过多的访问者。

如何在 WordPress 中创建超级菜单

在 WordPress 中创建大型菜单的最简单方法是使用插件。 如果您拥有一定程度的技术知识，还可以使用自定义 CSS 代码手动添加大型菜单。

本节将更详细地介绍这两个选项。 请随意直接跳到您喜欢的方法。

如何使用 Max Mega Menu 插件创建 WordPress Mega 菜单

Max Mega Menu 是一个完整的菜单管理插件，支持多个菜单位置。 这种灵活性使您可以为站点的不同部分自定义大型菜单设置。

在我们深入了解 Max Mega Menu 的工作原理之前，首先安装并配置该插件。

第 1 步：配置 Max Mega 菜单插件

要 安装 WordPress 插件 ，请登录 WordPress 仪表板并前往 插件 → 添加新插件 。 输入 Max Mega Menu 在搜索栏中 单击“立即安装 ”和 “激活” 。 ，然后在找到插件后

访问 超级菜单 接下来，从左侧边栏 以配置其默认设置。 例如，如果您想添加菜单位置，请按照下列步骤操作：

1. 转到 外观 → 菜单 。
2. 选择 菜单位置 并单击 添加另一个菜单位置 。
3. 输入要显示菜单的网站部分，例如页眉、页脚或侧边栏。
4. 选择您创建的自定义菜单。
5. 单击 添加菜单位置 。

创建后，勾选 启用 下的 常规设置 框。 旁边 在“事件” ，从三个主要选项中进行选择以触发菜单：

• 悬停意图 。 用户需要将鼠标悬停在顶级菜单上几秒钟，然后才会出现二级菜单。 此延迟旨在防止意外点击。
• 悬停 。 当用户将鼠标指针悬停在父菜单上时，子菜单将立即打开。 由于没有延迟，这种方法最适合提供流畅的导航系统。
• 点击 。 它要求访问者单击或点击大型菜单才能打开其第二级项目。 此选项非常适合触摸屏设备和精确鼠标悬停可能具有挑战性的情况。

如果选择 “单击” ，请转到 “高级” 选项卡→ “单击事件行为” 。 然后，选择以下选项之一来确定当用户单击大型菜单时会发生什么：

• 第一次单击将打开子菜单，第二次单击将关闭子菜单。
• 第一次点击将打开二级菜单，下次点击将跟随页面链接。
• 第一次点击会直接打开页面链接。

然后，返回 “常规设置” 选项卡并找到 “效果” 区域。

在这里，为您的大型菜单选择动画类型，包括淡出、淡出、滑动和向上滑动。 您还可以将动画速度设置为快、中或慢。

旁边的样式 要为移动设备菜单启用动画，请选择效果（移动设备） – 向下滑动、向左滑动或向右滑动。 请注意，使用交互元素可能会减慢您在移动设备或网速较慢的系统上的网站速度。

对配置设置感到满意后，单击 “保存更改” 。

第 2 步：设置菜单布局和外观

Max Mega Menu 提供了您可以立即使用的默认菜单主题。 但如果您更喜欢创建自定义主题，则可以轻松个性化您的大型菜单。

为此，请 访问菜单主题 从 Max Mega 菜单设置 。 单击 三点图标 旁边的 “选择要编辑的主题” ，然后选择 “添加新主题” 。

下 在“常规设置” ，您可以更改新主题的标题、选择箭头样式、设置子菜单项的常规行高，以及将阴影应用于大型菜单布局。

接下来，打开 菜单栏选项 卡来个性化您的顶级菜单。 这将决定访问者如何在最小化视图上看到您的导航菜单。

该选项卡的上侧提供了调整菜单高度和背景颜色的设置。 您还可以设置自定义填充以实现所需的布局，并在菜单项周围添加边框以进行视觉区分。

向下滚动时，还有一个专门的部分用于自定义顶级菜单项：

• 菜单项对齐 。 将所有菜单项放置在网站的左侧、中间或右上角。
• 项目字体 。 自定义菜单排版以匹配您的网站设计，包括字体系列、大小、粗细、颜色和视觉样式选项。
• 项目背景 。 更改每个菜单项的背景颜色。 如果您已经设置了 菜单背景 ，请将其保留为透明。
• 项目间距 。 调整每个项目周围的边距和填充，以微调您的大型菜单布局。
• 项目边框 。 定义边框的颜色、菜单宽度和半径以创建不同的视觉效果。
• 突出显示当前项目 。 启用后，当用户将鼠标悬停在当前菜单项上时，当前菜单项将突出显示，使导航更加直观。

设置顶部菜单后，进入 超级菜单 部分。 在此选项卡中，您可以更改第二级和第三级项目的字体、背景颜色、间距和边框。

要创建独特的外观，请确保为父菜单和子菜单分配不同的配色方案。 但是，我们建议使用相同的排版以确保一致性。

完成后，不要忘记保存更改。

第 3 步：将内容添加到 WordPress 菜单

Max Mega Menu 提供拖放界面，可以轻松添加新内容。 除了文本链接之外，您还可以添加 WooCommerce 产品、图像和搜索过滤器。

首先导航到 “外观” → “菜单” 以创建新菜单或编辑现有菜单。 然后，按照以下说明操作：

1. 勾选 启用 中的 Max Mega 菜单设置 左侧 框。 此框还允许您配置多个位置的菜单设置。
2. 向下移动到 页面 ，选择所有页面，然后单击 添加到菜单 。
3. 重复相同的过程 对帖子 、 类别 和 产品类别 。
4. 下 在菜单结构 ，将子类别拖放到各自的主类别中。 您可以通过将其拖动到二级菜单的右侧来创建三级菜单，依此类推。

默认情况下，该插件使用弹出菜单或下拉菜单样式。 要创建大型菜单，请将鼠标悬停在其中一个页面上，然后单击 “大型菜单” 按钮。

出现弹出窗口时，将子菜单显示模式设置为 “网格布局” 或 “标准布局” 。

大型菜单网格布局可让您在多列和行中创建菜单。 同时，您只能在使用标准布局时更改列数。

添加丰富的内容，使您的菜单更具视觉吸引力 通过单击选择要添加到面板的小部件， 。 然后，从下拉列表中选择一个小部件，包括搜索栏、图片库、日历、音频内容、视频和产品过滤器。

如果您的网站有一个包含许多链接的复杂菜单，请为每个项目分配一个图标以提升用户体验。 只需导航到 图标，然后从各个平台选择图标即可。 左侧边栏上的

关闭 超级菜单 弹出窗口并对每个顶级页面重复该过程。 配置所有设置后，单击 “保存菜单” 以在您的站点上启用大型菜单。

如何使用代码手动创建 WordPress 超级菜单

使用代码手动创建 WordPress 大型菜单可以让您更好地控制其设计和功能。 但是，此方法需要自定义 CSS 知识以及调整主题样式表文件的能力。

按照此分步指南将大型菜单添加到您的 WordPress 网站：

第 1 步：准备您的开发环境

WordPress 是 一个开源内容管理系统 (CMS)，这意味着您可以使用自定义代码来调整其主题和插件。

但是，在实时网站上编辑代码可能会导致意外问题。 为了防止这种情况， 请备份您的 WordPress 网站 并创建一个安全的实验环境。

Hostinger 的 托管 WordPress 托管 提供自动备份以确保您的文件安全。 业务 云 和 启动 计划还附带 WordPress 临时工具。 此功能允许您复制网站并在将更改部署到实时网站之前测试更改。

以下是如何 设置 WordPress 临时环境： 使用 Hostinger

1. 登录 hPanel 并转至 网站 。
2. 选择您的域名并单击 “管理” 。
3. 导航到 WordPress → 暂存。 左侧边栏上的
4. 前往 “暂存” 选项卡并单击 “创建暂存” 。
5. 为您的暂存环境创建一个子域。 该过程最多可能需要 15 分钟才能完成。

第 2 步：访问主题的样式表文件

下一步是 自定义主题的style.css文件。 在新创建的临时站点上

对于大多数托管提供商来说，它需要连接到第三方文件传输协议 (FTP) 客户端。 轻松做到这一点 幸运的是，Hostinger 用户可以通过hPanel ：

1. 导航到 文件 → 文件管理器 ，然后选择 访问（您的域）的文件 。
2. 打开 public_html → staging → wp_content → 主题 。
3. 选择您想要调整的 WordPress 主题并打开其文件夹。
4. 双击主题的 style.css 文件进行更改。
5. 向下滚动到文本编辑器底部并输入以下代码：

.main-navigation ul:悬停 li ul,
 .main-navigation ul:悬停 li ul li ul {
     显示：继承；
 }

当用户将鼠标悬停在第二级和第三级项目上时，这将使它们可见。

第 3 步：自定义超级菜单

要进一步自定义菜单样式，请直接在主题的样式表中输入您自己的代码。 以下是 WordPress 大型菜单 CSS 片段的一些常见示例：

在超级菜单中创建列：

.mega-menu li.mega-menu-column {
   宽度：25%；  /* 对于 4 列布局 */
   向左飘浮;
   内边距：10px；
 }

自定义每个菜单项的颜色、填充和文本样式：

.mega-menu ul.mega-子菜单 li a {
   颜色：#555；
   内边距：8 像素 15 像素；
   显示：块；
   文本装饰：无；
 }

优化移动视图的菜单布局：

@media 屏幕和（最大宽度：767px）{
   .mega-menu li.mega-menu-column {
     宽度：100%；
     浮动：无；
   }
 }

这些代码片段是否能按预期工作取决于您网站的 CSS 和 HTML 结构的其余部分。 这就是为什么测试每个代码并根据需要进行调整很重要。

最佳 WordPress 超级菜单插件

虽然可以在没有插件的情况下在 WordPress 中创建大型菜单，但这种手动方法不适合几乎没有编码经验的用户。 如果您是一个完全的初学者，最好使用 WordPress 菜单插件来简化整个过程。

除了 Max Mega Menu 之外，这里还有三个 最佳 WordPress 插件 用于创建大型菜单的 安装 QuadMenu 。 您可以从 WordPress 插件目录 ，而WP Mega Menu Pro 和 JetMenu 仅在第三方市场中提供。

1. QuadMenu

QuadMenu 是一个开源的本地 WordPress 大型菜单插件，提供广泛的主题和位置。

使用免费版本，您可以在菜单中显示导航菜单小部件、自定义菜单折叠断点以及创建各种大型菜单选项。 其中包括画布外、粘性、水平和垂直大型菜单。

专业版计划起价为 49 美元/年 ，提供附加功能，如选项卡、登录、注册、社交和轮播菜单。

2.WP Mega菜单专业版

WP Mega Menu 是一款易于使用的大型菜单生成器，专为初学者设计。 它提供即时设置，允许您立即创建响应式大型菜单。

尽管它注重用户友好性，但这个 WordPress 大型菜单插件提供了广泛的自定义功能。 您可以轻松调整字体、菜单类型、帖子元数据、菜单配色方案和菜单动画。

WP Mega 菜单仅提供高级版本。 无限站点的费用 为19 美元/许可证， 并提供一年更新和优先支持。

3. 快捷菜单

JetMenu 是一款高级插件，用于创建包含图像、视频、音频记录和其他类型的交互式内容的 WordPress 大型菜单。

通过 每年 43 美元 的订阅，您将可以访问拖放构建器和多种菜单方向布局 – 汉堡式、水平和垂直菜单。

另一个出色的大型菜单功能是预设管理器，使您能够为不同的菜单创建和保存多个模板。

使用 WordPress 超级菜单的好处

与传统菜单相比，在 WordPress 中使用大型菜单可为您的网站带来以下好处：

• 更好的组织 。 如果您的 WordPress 网站有大量内容或产品类别，大型菜单可以帮助您整齐地组织并向用户展示它们。
• 增强视觉吸引力 。 大型菜单可以定制以匹配您网站的品牌，确保设计具有凝聚力和视觉吸引力。
• 提高用户参与度 。 当用户可以轻松找到所需内容时，他们更有可能探索您的 WordPress 网站。 大型菜单简化了导航，鼓励用户停留更长时间并与您的内容进行交互。
• Efficient space utilization. Use a mega menu to showcase a wide range of options without cluttering the site’s layout.
• 竞争优势 。 提供大型菜单可以使您的网站从竞争对手中脱颖而出，表明您致力于提供卓越的用户体验。

WordPress 超级菜单替代方案

虽然 WordPress 大型菜单使您能够显示复杂的菜单结构，但您也可以通过使用下拉菜单或弹出菜单来选择更简单的替代方案。

如果您有一个简单的菜单层次结构并希望保持 WordPress 网站设计简洁，那么这尤其适合。

如何通过经典主题创建下拉菜单

如果您使用的是经典主题，请按照以下 创建下拉菜单： 步骤使用 WordPress 定制器

1. Log in to your WordPress dashboard and navigate to Appearance → Customize.
2. In the Customizer interface, choose Menus and select your existing menu. Otherwise, create a new one.
3. 单击 “添加项目” 以添加新页面或帖子。
4. 通过将子菜单拖动到父项目的下方并稍靠右侧，可以按层次排列子菜单。
5. 完成后，转到 菜单位置 并将下拉菜单分配到所需的部分。
6. 单击 “发布” 保存您的更改。

如何通过块编辑器创建下拉菜单

对于块主题用户，通过古腾堡编辑器创建一个下拉菜单：

1. 前往 外观 → 编辑器。 从 WordPress 仪表板
2. 在块编辑器中，单击 加号 (+) 图标 顶部菜单栏上的 并选择“块” 。
3. 搜索 导航 块并将其拖动到您的首选区域。
4. 添加导航块后，导航到右侧边栏并打开 块设置 面板。
5. 单击 加号 (+) 图标 并选择 页面链接 以添加主页和子菜单项。
6. 要创建下拉菜单，请将子菜单项稍微拖动到其父项下方的右侧。 或者，单击现有菜单旁边的三点图标，然后选择 “添加子菜单链接” 。
7. 在 “设置”选项 卡中，您可以调整菜单布局并垂直或水平显示菜单。
8. 一旦您对下拉菜单的外观和功能感到满意，请单击 “发布” 或 “更新” 以保存更改。

结论

之前 在启动 WordPress 网站 ，确保直观的导航非常重要。 对于具有多个页面的电子商务商店和网站，使用大型菜单是理想的解决方案。

与标准 WordPress 菜单不同，大型菜单使您能够以简单但视觉上吸引人的方式组织复杂的信息。

有两种主要方法可以将大型菜单添加到您的网站。 对于初学者，我们建议使用 Max Mega Menu 或其他插件来创建顶级导航栏及其子菜单。

如果您是喜欢更大灵活性的高级用户，可以使用 CSS 代码根据需要自定义大型菜单。 为了节省时间和精力，请注册像 Hostinger 这样可靠的托管提供商，它提供 WordPress 临时工具和内置代码编辑器。

我们希望这个 WordPress 大型菜单教程能够提供必要的指导，帮助您提供更好的用户体验。 如果您有更多问题，请随时在下面发表评论。

WordPress 超级菜单常见问题解答

查找有关 WordPress 大型菜单的常见问题解答。