目录
Mega菜单是一个大型的面板式下拉,它打开在导航项下方,并在列中一次性列出许多链接,而不是将它们堆叠在一起。它用整个站点部分的宽幅预览取代了一个狭窄的可滚动子菜单,因此访问者可以通过嵌套菜单看到他们的选项,而不是狩猎。
您几乎在访问过的每个大型零售或 SaaS 网站上都使用过一个。亚马逊的类别菜单、大学的学术下拉、软件公司的产品和解决方案面板:所有大型菜单。本指南涵盖了大型菜单与常规下拉不同的原因、当额外的复杂性得到回报时、当它没有得到回报时,以及如何在 Elementor 中构建一个而不支付页面构建者许可证费用。
什么是大型菜单?
巨型菜单是一个二维下拉面板,这意味着它同时使用宽度和高度,而不是单个垂直堆栈。巨型菜单可能显示四列或五列,每列有自己的标题、子链接,有时还有图标、缩略图或短促销块。
Trigger 的工作原理与任何下拉相同: 悬停或单击顶层项目,如产品、服务或商店,出现的内容不同,标准下拉显示一个狭窄的列表。一个巨型菜单打开一个全宽或近全宽面板,可以容纳按类别组织的数十个链接,根据 尼尔森诺曼集团的研究 关于访问者如何扫描大型导航面板。
巨型菜单如何与标准下拉有所不同
实际差异归结为三件事:宽度、结构和内容类型。
- 宽度: 标准下拉运行 200 至 300 像素宽;巨型菜单可以跨越大部分视口。
- 结构: 下拉是一列;巨型菜单使用多个列,通常分组在子标题下。
- 内容: 下拉是纯文本链接;巨型菜单通常将链接与图标、缩略图或简短描述混合在一起。
这种结构上的差异也是为什么大型菜单需要更多的规划。一个标准的下拉很容易放在一起:列出六个链接,你就完成了。大型菜单需要一个实际的信息架构:哪些类别获得最高计费,每列中包含哪些内容,以及整个内容如何在没有空间并排容纳四列的手机屏幕上崩溃。
超级菜单 vs 下降 vs 画外菜单
Mega菜单并不是组织大量导航的唯一方法,以下是三种最常见的模式的比较。
| 导航类型 | 最好的 | 力量 | 小心 |
|---|---|---|---|
| 标准下降 | 每个部分有少数页面的网站 | 构建速度快,访客没有学习曲线 | 8到10个链接的房间里跑出来 |
| 巨型菜单 | 大型目录、许多类别或产品线 | 显示整个部分一目了然,图像和分组的空间 | 需要真实的设计和内容规划;容易过度 |
| 画布外菜单 | 移动优先站点,最少的标头 | 保持头部清洁,在小屏幕上效果良好 | 将导航隐藏在水龙头后面,添加一个额外的步骤 |
当巨型菜单真正有帮助时
Mega菜单在网站拥有真正深度导航时,它就获得了复杂性,拥有数十种产品类别的电子商务商店、拥有部门和项目的大学、拥有多个版块的媒体网站以及拥有多种产品和用例的SaaS公司都往往会快速超过标准下拉。
测试很简单:如果您当前的下拉已经需要滚动条,或者访问者因在标头中找不到类别页面而通过搜索登陆类别页面,那么巨型菜单正在解决真正的问题,而不是装饰问题。
当巨型菜单造成的伤害大于其帮助时
5页的小册子站点不需要一个超级菜单,反正构建一个通常会让站点感觉比它复杂,如果你的整个导航适合六七个链接,一个超级菜单会增加视觉重量,额外的标记,还有一件可以在手机上坏掉的东西,没有真正的好处。
Bad mega菜单比简单的菜单更糟糕,将站点上的每个页面挤在一个面板中,因为“更可见是更好的”将访问者实际想要的链接埋在他们不想要的链接下,如果每个列看起来同样重要,那么在构建面板之前,它们都不会将列表修剪到人们实际搜索的部分。
常见的大型菜单设计模式
- 链接栏: 简单的分类链接列表、最常见的模式和最容易维护的模式。
- 特色或促销面板: 链接列与促销图像、横幅或号召性用语块混合。
- 图标主导的菜单: 每个链接都配有一个小图标,在 SaaS 功能和解决方案菜单上很常见。
- 选项卡式巨型菜单: 顶级类别充当面板内的选项卡,切换列显示的内容。
无障碍和移动考虑因素
Mega菜单只比它的键盘支持好,每个触发器都需要在悬停和聚焦上打开,因为一个访问者用键盘通过标头来标记不能悬停任何东西,所以添加 aria-expanded 到触发器和 aria-haspopup 因此,屏幕阅读器会宣布面板可用,并确保 Escape 关闭面板并将焦点返回到触发器。
Phone上没有空间四列并排,所以大多数巨型菜单在汉堡图标下塌陷成堆叠的手风琴像真正的访客一样测试塌陷的版本:轻点目标应该足够大,可以拇指,并且列表不应该比它所保护的页面多滚动才能到达底部。
如何在 Elementor 中免费构建大型菜单
Elementor自己的巨型菜单选项位于Elementor Pro的后面,位于Elementor的覆盖的嵌套菜单组件内部 巨型菜单文档。如果你在 Elementor 免费版本上,那条路径是封闭的。
的 主插件巨型菜单扩展 elementor Pro的情况下为您获得相同的结果,它将您现有的WordPress导航菜单中的任何项目变成了它下面一个完全设计的Elementor面板的触发器,它是数十个工具之一 主插件小部件和扩展库.
- 与 Elementor 一起安装并激活主插件(免费),然后启用主插件 → 扩展的 Mega 菜单扩展。
- 转到外观 → 菜单,或打开标题 主插件主题生成器 如果那是您的标头所在,请打开启用巨型菜单。每个菜单项旁边都会出现紫色巨型大师徽章;单击要变成巨型菜单的项目上的徽章。
- 在该项目上启用"巨型菜单",然后单击"使用元素编辑"来设计面板:列、图像、图标或促销块,无论该部分需要什么。
- 设置面板宽度、全宽度或包含的面板宽度,然后在桌面和真实手机上发布并检查它。
想先看完布局吗? 超级菜单演示 和 木炭导航和大型菜单部分 两者都在实时标头中显示扩展。
常见问题
巨型菜单是什么意思?
Mega菜单是一个大型的多列下拉面板,它打开在导航项下方,同时显示许多链接,通常按类别分组,并配对图标或图像。它用更宽的、有组织的站点部分预览来取代单个狭窄列表。
如何创建大型菜单?
将常规导航菜单项变成巨型菜单触发器,然后设计面板内容:链接列、标题和可选图像或图标。在 WordPress 和 Elementor 中,Master Addons Mega Menu 等插件可处理触发器并让您直观地构建面板,因此您无需手动编码下拉标记。
常规菜单和巨型菜单有什么区别?
常规下拉菜单显示单个狭窄的文本链接列。巨型菜单打开一个包含多个列的更宽的面板,并且经常在链接旁边混合图像、图标或简短的描述。常规菜单适合少数页面;巨型菜单适合具有许多类别或部分的网站。
使用巨型菜单有哪些优点?
Mega菜单一眼就能显示整个站点部分,而不是强迫访问者打开和重新打开嵌套子菜单,它减少了点击次数,可以到达一个深层页面,给你像图标或缩略图这样的视觉提示空间,并且适用于商店,大学和软件网站,有很多类别可以组织。
Max Mega 菜单免费吗?
Max Mega Menu,一个独立的 WordPress 插件,在 WordPress。org 上有一个免费版本,带有额外的功能的付费附加组件。如果您已经在 Elementor 中构建,Master Addons Mega Menu 扩展是一个免费的替代方案,它使用 Elementor 编辑器而不是单独的菜单构建器界面来设计面板。
如何创建自己的菜单?
Appearance 下先建立你的导航菜单,然后在 WordPress 中建立菜单,在访问者应该看到它们的顺序中添加你想要的页面和链接,一旦该菜单存在,你可以将其任何项目变成一个巨型菜单触发器,并在其顶部设计下拉面板。
相关阅读
