您想在您的 WordPress 网站上添加大型菜单吗?
超级菜单允许您将数十甚至数百个链接排列到用户友好的列和行中。然后,您可以添加丰富的内容,例如图像和视频,使您的大型菜单更加有用。
在本文中,我们将向您展示如何逐步向您的 WordPress 网站添加大型菜单。
![如何在 WordPress 网站上添加大型菜单(分步) 如何在 WordPress 网站上添加大型菜单(分步)](https://www.wpbeginner.com/wp-content/uploads/2017/12/how-to-add-a-mega-menu-on-your-wordpress-site-step-by-step-og.png)
为什么要在 WordPress 网站上添加超级菜单?
WordPress 附带了一个拖放构建器,您可以使用它来创建各种菜单,包括下拉菜单、标题菜单等。甚至还有一些插件可以让您在 WordPress 主题中创建自定义导航菜单。
但是,如果您的网站有大量内容,那么您可能需要创建一个大型菜单。这允许您将多列下拉菜单添加到标准 WordPress 菜单中。
您可以使用大型菜单在不同的标题和副标题下组织内容,以便访问者可以快速找到他们想要的内容。例如,如果您创建一个在线市场,那么您可以将所有产品类别和子类别排列在一个大型菜单中。
![电子商务大型菜单的示例 电子商务大型菜单的示例](https://www.wpbeginner.com/wp-content/uploads/2017/12/megamenu-online-store.png)
大型菜单还可以向访问者显示丰富的内容,例如视频、文本、搜索和最近的帖子。
您还可以添加图像,这使得大型菜单更易于扫描。
![内容丰富的大型菜单示例 内容丰富的大型菜单示例](https://www.wpbeginner.com/wp-content/uploads/2017/12/megamenu-rich-content.png)
也就是说,让我们看看如何轻松地将大型菜单添加到您的 WordPress 网站。
如何为您的 WordPress 网站创建大型菜单
在 WordPress 网站上添加大型菜单的最简单方法是使用Max Mega Menu。该插件允许您向大型菜单添加丰富的内容,包括视频、图片库、搜索等。
通过这种方式,您可以创建更具吸引力和有用的菜单。
![WordPress 大型菜单 WordPress 大型菜单](https://www.wpbeginner.com/wp-content/uploads/2023/02/mega-menu-wordpress.gif)
您还可以通过添加不同的颜色、更改字体大小和使用不同的图标来设计大型菜单的每个部分。
首先,您需要安装并激活该插件。如果您需要帮助,请参阅我们有关如何安装 WordPress 插件的指南。
在您的 WordPress 网站上启用超级菜单
激活后,转到超级菜单»菜单位置以查看可以添加超级菜单的所有不同区域。
根据您的WordPress 主题,您可能会看到不同的选项。
![在 WordPress 网站或博客的不同区域启用大型菜单 在 WordPress 网站或博客的不同区域启用大型菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/mega-menu-locations.png)
首先,您需要在您想要使用大型菜单的每个位置启用它们。
为此,只需单击展开某个位置,然后选中其“启用”框即可。
![在 WordPress 中启用超级菜单功能 在 WordPress 中启用超级菜单功能](https://www.wpbeginner.com/wp-content/uploads/2017/12/enabling-megamenu-location.png)
之后,您可以更改将打开大型菜单的“事件”。
默认设置是“悬停意图”,这意味着访问者必须将鼠标悬停在大型菜单上几秒钟才能触发它。这适用于大多数WordPress 网站,但您也可以打开“效果”下拉列表并选择“悬停”或“单击”。
如果您选择“点击”,则访问者将需要点击才能浏览大型菜单。如果您担心访问者可能会意外触发菜单,这可能会很有用,这可能会令人沮丧。
同时,一旦访问者将鼠标移到“悬停”上,“悬停”就会打开您的大型菜单。这可以鼓励访问者探索网站的不同区域,因此您可能需要在登陆页面或网站主页上使用“悬停” 。
![更改超级菜单触发事件 更改超级菜单触发事件](https://www.wpbeginner.com/wp-content/uploads/2017/12/megamenu-trigger-event.png)
做出此决定后,您可以使用“效果”设置更改菜单的打开方式。
Max Mega Menu 有不同的动画可供您尝试,包括淡入淡出和向上滑动。您还可以更改动画的速度。通过尝试不同的动画,您可以创建一个吸引访问者注意力的大型菜单。
![更改大型菜单上的动画效果 更改大型菜单上的动画效果](https://www.wpbeginner.com/wp-content/uploads/2017/12/megamenu-animation-effects.png)
如果您不想使用任何动画,只需打开第一个下拉列表并选择“无”。
默认情况下,Mega Menu 不在移动设备上使用动画,因为智能手机和平板电脑的处理能力通常较低。但是,如果您想为移动设备访问者创建独特的动画,则可以使用“效果(移动设备)”区域中的设置。
如果您想在移动设备上测试大型菜单,请查看我们的指南,了解如何从桌面查看 WordPress 网站的移动版本。
如果您从“事件”下拉菜单中选择“点击”,请确保接下来选择“高级”选项卡。
在这里,您可以使用“点击事件行为”来定义访问者单击大型菜单时会发生的情况。例如,第二次单击可能会关闭菜单或打开新链接。
![更改大型菜单中的事件单击行为 更改大型菜单中的事件单击行为](https://www.wpbeginner.com/wp-content/uploads/2017/12/click-event-behavior.png)
您还可以查看更多设置,但这对于大多数WordPress 博客和网站来说应该足够了。
如果您对插件的配置方式感到满意,请单击“保存更改”。
要为更多位置启用大型菜单,只需遵循上述相同的过程即可。
![为多个位置启用大型菜单 为多个位置启用大型菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/megamenu-multiple-locations.png)
自定义超级菜单在您网站上的外观
下一步是配置大型菜单在您网站上的外观。
您可以通过选择屏幕左侧的“菜单主题”选项卡来执行此操作。
![为大型菜单创建自定义主题 为大型菜单创建自定义主题](https://www.wpbeginner.com/wp-content/uploads/2017/12/mega-menu-theme.png)
在此屏幕上,您可以更改箭头图标的方向、使用不同的行高、添加阴影等等。
当您对设置感到满意时,请不要忘记单击“保存更改”。
![自定义大型菜单在 WordPress 网站上的外观 自定义大型菜单在 WordPress 网站上的外观](https://www.wpbeginner.com/wp-content/uploads/2017/12/saving-megamenu-theme.png)
如果您想随时删除这些更改,只需选中“重置小部件样式”框,然后单击“保存更改”即可。
接下来,您可以自定义菜单栏,这是访问者在菜单处于默认折叠状态时看到的栏。
![WordPress 大型菜单中的菜单栏示例 WordPress 大型菜单中的菜单栏示例](https://www.wpbeginner.com/wp-content/uploads/2017/12/wordpress-menu-bar.png)
要进行这些更改,请单击“菜单栏”选项卡,然后使用设置更改背景颜色、填充、边框半径等。
您甚至可以通过在“菜单背景”部分中选择两种不同的颜色来创建颜色渐变。
![将自定义颜色添加到 WordPress 超级菜单 将自定义颜色添加到 WordPress 超级菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/menu-items-color.png)
如果向下滚动,则可以更改顶级菜单的外观。
这是第一行项目,当超级菜单处于折叠状态时可见。
![自定义顶级菜单项的外观 自定义顶级菜单项的外观](https://www.wpbeginner.com/wp-content/uploads/2017/12/customizing-top-level.png)
由于它们非常重要,您可能希望使顶级菜单项脱颖而出。
例如,在下图中,我们使用不同的背景颜色。
![网站大型菜单的示例 网站大型菜单的示例](https://www.wpbeginner.com/wp-content/uploads/2017/12/top-level-megamenu.png)
在“悬停状态”部分中,您可以突出显示当前选择的顶级菜单项。
例如,在下图中,我们使用了下划线效果。
![将悬停状态添加到 WordPress 大型菜单 将悬停状态添加到 WordPress 大型菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/underline-effect-megamenu.png)
这可以帮助访问者查看他们在菜单中的位置,这对于需要大型菜单的网站特别有用。
如果您确实添加悬停状态,请滚动到屏幕底部并选中“突出显示当前项目”框。
![突出显示大型菜单中的当前项目 突出显示大型菜单中的当前项目](https://www.wpbeginner.com/wp-content/uploads/2017/12/highlight-current-item.png)
之后,您可以更改子菜单的外观。
这是出现在顶级父级下的菜单,如下图所示。
![WordPress 大型菜单的示例 WordPress 大型菜单的示例](https://www.wpbeginner.com/wp-content/uploads/2023/02/submenu-mega-wordpress.png)
要自定义子菜单,请单击“超级菜单”选项卡。
您现在可以使用这些设置来更改子菜单的背景颜色、增加半径以创建弯角、添加填充等。
![自定义网站或博客上的子菜单 自定义网站或博客上的子菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/sub-menu-settings.png)
您可以使用小部件将内容添加到大型菜单中。例如,您可以添加一个 Gallery 小部件并显示您最流行的 WooCommerce 产品,或者在大型菜单中嵌入标签云。这些小部件可以提供额外的信息,或鼓励访问者单击某些菜单项。
您可以通过滚动到“小部件”部分来自定义这些小部件的外观。例如,您可以更改小部件标题的颜色、增加字体大小、添加填充以及调整对齐方式。
![如何逐步在 WordPress 网站上添加大型菜单 如何逐步在 WordPress 网站上添加大型菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/megamenu-customize-widgets.png)
在此屏幕上,您还可以自定义二级菜单项和三级菜单项在您的网站、博客或在线市场上的外观。这些是顶级菜单项的子项。
构建菜单时,可以添加四个甚至更多级别来创建嵌套的大型菜单。如果您这样做,那么 WordPress 将简单地对所有后续级别使用第三级样式。
您可以在下图中看到它的实际效果。第二级有红色文本,第三级和第四级都使用相同的蓝色文本。
![如何为 WordPress 创建大型菜单 如何为 WordPress 创建大型菜单](https://www.wpbeginner.com/wp-content/uploads/2023/02/mega-menu-style.png)
当您对菜单的设置感到满意时,请不要忘记单击“保存更改”。
如何在您的 WordPress 网站上添加超级菜单
完成大型菜单的自定义后,就可以将其添加到您的网站了。
只需转到外观»菜单。
![编辑 WordPress 网站上的菜单 编辑 WordPress 网站上的菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/wordpress-creating-menu.png)
如果您想将现有菜单变成大型菜单,请打开“选择要编辑的菜单”下拉列表并从列表中选择它。请注意,您选择的菜单必须分配到已启用大型菜单功能的位置。
如果您想从头开始,请单击“创建新菜单”,然后输入新超级菜单的标题。
![在 WordPress 中创建导航菜单 在 WordPress 中创建导航菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/creating-new-menu.png)
然后,您可以选择要使用的位置,然后单击“创建菜单”。再次强调,这必须是您启用大型菜单的位置。
将内容添加到您的 WordPress 菜单
之后,添加所有页面、帖子、WooCommerce产品以及您想要包含在大型菜单中的任何其他内容。有关分步说明,请参阅有关如何在 WordPress 中添加导航菜单的初学者指南。
接下来,您需要将项目排列到要在大型菜单中使用的父菜单和子菜单中。要创建子菜单,请将项目拖动到父菜单下方,然后将其稍微向右拖动,然后释放它。
![将页面和帖子排列到父子布局中 将页面和帖子排列到父子布局中](https://www.wpbeginner.com/wp-content/uploads/2017/12/parent-child-menu.png)
要创建多个级别,只需向右拖动项目即可使它们在彼此下方缩进。这类似于在 WordPress 中创建下拉菜单。
启用超级菜单功能
完成后,单击展开“Max Mega Menu Settings”并选中“Enable”旁边的框。
![启用超级菜单功能 启用超级菜单功能](https://www.wpbeginner.com/wp-content/uploads/2017/12/maxmega-menu-settings.png)
在此框中,您还可以覆盖默认的大型菜单设置。这允许您为 WordPress 网站的不同区域创建独特的大型菜单,因此请继续进行您想要的任何更改。
之后,点击“保存”。
创建超级菜单布局
现在,将鼠标悬停在第一个顶级项目上,您将看到一个新的“超级菜单”按钮。继续并单击按钮。
![配置 Max Mega 菜单设置 配置 Max Mega 菜单设置](https://www.wpbeginner.com/wp-content/uploads/2017/12/configuring-mega-menu.png)
您现在将看到该顶级项目的所有设置。
默认情况下,Max Mega 菜单将使用弹出样式,其中子菜单从侧面“弹出”。要创建大型菜单,请打开“子菜单显示模式”下拉列表,然后选择“标准布局”或“网格布局”。
标准布局以列形式显示所有子菜单。
![具有标准布局的大型菜单的示例 具有标准布局的大型菜单的示例](https://www.wpbeginner.com/wp-content/uploads/2023/02/mega-menu-columns-1.png)
同时,网格布局允许您将子菜单项组织成列和行。
如果您想要展示大量内容(例如在线商店中的所有数字产品),或者考虑到非常具体的布局,那么这是理想的选择。
![将菜单项排列成行和列 将菜单项排列成行和列](https://www.wpbeginner.com/wp-content/uploads/2017/12/grid-layout-rows.png)
选择标准或网格布局后,您将看到分配给该父级的所有子菜单。
现在,您可以继续更改这些项目在大型菜单中的排列方式。
![将标准布局添加到导航菜单 将标准布局添加到导航菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/creating-mega-menu.png)
如果您使用标准布局,则可以使用右上角的下拉菜单更改列数。
如果您使用网格布局,则可以使用“+Column”和“+Row”按钮添加列和行。
![将网格布局添加到 WordPress 菜单 将网格布局添加到 WordPress 菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/adding-rows-columns.png)
当您对布局感到满意时,您可以使用拖放将子菜单项排列到不同的列和行中。
之后,是时候更改每个项目在列中占用的空间了。Max Mega 菜单将当前尺寸显示为总可用宽度的一部分。
例如,在下图中,两列都占用了一半的可用空间。
![为 WordPress 菜单创建自定义布局 为 WordPress 菜单创建自定义布局](https://www.wpbeginner.com/wp-content/uploads/2017/12/mega-menu-space.png)
要更改项目的大小,只需单击其箭头按钮即可放大或缩小分数。
创建适合移动设备的超级菜单(仅限网格布局)
默认情况下,Max Mega Menu 将在桌面和移动设备上显示相同的内容。这可能是网格布局的问题,因为智能手机和平板电脑通常具有较小的屏幕,并且水平滚动可能很困难。
如果您使用网格布局,那么您可以为移动设备创建不同的大型菜单。例如,您可以使用更少的列,这样用户就不必水平滚动。通过这种方式,您可以创建一个适合移动设备的 WordPress 菜单。
您可以使用“在移动设备上隐藏”图标隐藏整个列或行,该图标看起来像一个小手机。
![如何在 WordPress 中创建移动响应菜单 如何在 WordPress 中创建移动响应菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/hidden-mobile-megamenu.png)
只需打开和关闭图标,即可在桌面和移动设备上隐藏和显示不同的内容。
使用大型菜单小部件添加丰富的内容
完成后,您可以开始将小部件添加到大型菜单中。这允许您在子菜单中显示额外的内容,例如最近的评论、视频、图库等。
例如,您可以使用图像来促进在线商店的销售,或突出显示您的最新产品。
![在线商店菜单中内容丰富 在线商店菜单中内容丰富](https://www.wpbeginner.com/wp-content/uploads/2017/12/mega-menu-image.png)
要添加小部件,只需单击打开“选择小部件…”。落下。
您现在可以从列表中选择一个小部件。
![向网站导航添加丰富的多媒体内容 向网站导航添加丰富的多媒体内容](https://www.wpbeginner.com/wp-content/uploads/2017/12/mega-menu-widget.png)
WordPress 会自动将小部件添加到列或行,但您可以使用拖放将其移动到新位置。
要配置该小部件,请继续并单击其小扳手图标。
![在大型菜单中配置小部件 在大型菜单中配置小部件](https://www.wpbeginner.com/wp-content/uploads/2017/12/editing-widget-megamenu.png)
这将打开一个弹出窗口,您可以在其中向小部件添加内容并更改其设置。
根据您创建的小部件的类型,您将看到不同的选项。例如,如果您将音频音乐播放器小部件添加到大型菜单中,那么您将看到可以上传音轨的设置。
![在 WordPress 中添加音频小部件 在 WordPress 中添加音频小部件](https://www.wpbeginner.com/wp-content/uploads/2023/02/audio-widget-wordpress.png)
所有小部件都有一个“标题”字段,您可以在其中添加将显示在小部件上方的文本。
完成后,单击“保存”以存储更改,然后选择“关闭”。要将更多小部件添加到大型菜单中,只需遵循上述相同的过程即可。
![将页面和帖子排列成网格布局 将页面和帖子排列成网格布局](https://www.wpbeginner.com/wp-content/uploads/2017/12/multiple-widgets-megamenu.png)
查看默认超级菜单设置
接下来,只需单击“设置”选项卡。
在这里,您可以使用复选框来隐藏或显示子菜单中的不同内容。
![Max Mega 菜单设置 Max Mega 菜单设置](https://www.wpbeginner.com/wp-content/uploads/2017/12/settings-mega-menu.png)
您还可以在移动设备和桌面上隐藏或显示子菜单,并更改对齐方式,以便子菜单在顶级父菜单的左侧或右侧打开。
如果您对默认设置进行任何更改,请不要忘记单击“保存更改”。
将图像图标添加到 WordPress 超级菜单
图像图标可以帮助访问者了解菜单项的含义,甚至无需阅读导航标签。这对于大型菜单特别有用,访问者可能更喜欢快速浏览内容而不是阅读每个导航标签。
![带有图标的大型菜单的示例 带有图标的大型菜单的示例](https://www.wpbeginner.com/wp-content/uploads/2023/02/mega-menu-icons.png)
您可以使用图标来突出最重要的内容。例如,您可以通过向“结帐”菜单添加购物车图标来鼓励访问者完成购买。
要将图像图标添加到导航菜单中,请单击“图标”选项卡。
![将 dashicon 添加到 WordPress 菜单 将 dashicon 添加到 WordPress 菜单](https://www.wpbeginner.com/wp-content/uploads/2017/12/mega-menu-icons.png)
您现在可以从内置库中选择任何 dashicon 或使用您自己的图像。如果您升级到 Max Mega Menu pro,那么您还可以访问其他图标字体、Genericons 和 FontAwesome。
完成在您的 WordPress 网站上配置超级菜单
完成所有这些设置后,您可以关闭弹出窗口以返回主外观»菜单页面。
您现在可以为每个顶级父级重复此过程。
当您对大型菜单的设置方式感到满意时,请单击“保存菜单”按钮以使其生效。
![将大型菜单发布到您的 WordPress 网站 将大型菜单发布到您的 WordPress 网站](https://www.wpbeginner.com/wp-content/uploads/2017/12/publishing-mega-menu.png)
现在,只需访问您的网站即可查看正在运行的大型菜单。
我们希望本文能帮助您了解如何在 WordPress 网站上添加大型菜单。您还可以阅读我们关于最佳拖放 WordPress 页面构建器以及如何增加博客流量的指南。