它们是什么以及如何在 WordPress 中使用 Mega Menu

用于消除滚动的大型矩形菜单组导航选项非常适合具有许多页面的站点。 了解 WordPress 中的超级菜单是什么

超级菜单(有时称为“超级菜单”)是一种可扩展菜单,其中许多选项以二维下拉布局显示。 它们是容纳大量选项或快速显示较低级别网站页面的绝佳设计选择。

如下图所示,超级菜单具有以下特征:

  • GRANDES 二维面板 分为导航选项组;
  • 导航选项 结构化的 通过布局、排版和(有时)图标;
  • TUDO 立即可见 – 无滚动;
  • 外形因素 垂直或水平 在顶部导航栏中激活时; 从左侧导航激活时,它们可能显示为 大型飞出 (未显示);
  • 菜单选项显示给 鼠标悬停、单击或点击

超级菜单为图像和其他丰富的内容提供了足够的空间。 超级菜单图像可以帮助用户选择正确的选项。 超级菜单还允许设计者展示站点信息架构的各个级别,超级菜单包含一级类别和二级类别。

wordpress 中的超级菜单
魔兽世界网站上的超级菜单

超级菜单比普通的下拉菜单更好

对于具有许多功能的大型站点,常规下拉菜单通常会隐藏用户的大部分选项。 是的,您可以滚动,但是 (a) 令人头疼,(b) 滚动会隐藏菜单顶部的选项。 因此,您无法直观地比较所有选择; 你必须依靠短期记忆。 人们的脑子里已经有足够的东西了,短期记忆的混乱会降低在您的网站上执行任务的能力。 超级菜单一目了然地显示所有内容,因此用户可以看到而不是试图记住。

- 广告 -

常规下拉菜单不支持分组,除非您在代码中使用一些解决方法,例如在辅助选项前加上空格字符以缩进它们。 超级菜单允许您在视觉上强调项目之间的关系。 同样,这有助于用户了解他们的选择。

虽然纯文本可以很精彩,但插图确实值得很多文字。 超级菜单可以在适当的时候轻松使用图像和图标。 而且,即使您将自己限制在文本上,您也可以使用更丰富的排版(例如,允许您根据链接的重要性区分链接大小)。

价格畅销书 #2 网站开发和设计
价格畅销书 #3 用 Dreamweaver cc 开发动态网站

WordPress 上 Mega Menu 的时间注意事项

如果鼠标悬停在大型菜单上时,一个挑战是区分两种不同的用户意图。

  • 用户只需将鼠标移向屏幕上的某个目标,鼠标轨迹穿过大菜单对应的链接;
  • 用户实际上查看导航类别并需要有关它们的更多信息。

第二种情况应该触发超级菜单,但第一种情况不会。

考虑到这两个用户意图,不要让 WordPress 超级菜单的响应时间太快:鼠标必须保持静止 0,5 秒,然后才能显示取决于焦点的任何内容,例如超级菜单或工具提示。 违反这些规则会导致用户移动鼠标时屏幕闪烁难以忍受。 只有在指针停在导航栏项目上 0,5 秒后,您才能假设用户确实希望看到相关的下拉菜单。

- 广告 -
兆丰菜单
兆丰菜单

所以时间应该是:

1- 等待 0,5 秒。

2 – 如果指针仍悬停在导航栏项目上,则在 0,1 秒后显示其超级菜单。

3- 持续显示直到指针离开导航栏项目和下拉菜单 0,5 秒。 然后在不到 0,1 秒的时间内将其移除。

第 3 条的例外:最佳实现可以检测用户何时将导航栏项目指针移动到下拉目标。 当指针在这样的路径上时,下拉列表必须保持可见。 此补充指南解决了对角线问题,当路径临时将指针移出活动区域时会出现该问题。 当用户指向其中的内容时,下拉列表不应消失。

- 广告 -

在 WordPress 中添加超级菜单

您需要做的第一件事是安装并激活 Mega Menu 插件。 我们可以推荐 Max Mega菜单. 它是市场上最好的免费超级菜单 WordPress 插件。 激活后,该插件会在您的 WordPress 管理菜单中添加一个新菜单项 Mega Menu。 单击它会将您带到插件的设置页面。

超级菜单 WordPress 设置

默认设置适用于大多数站点。 但是,您需要更改菜单颜色以匹配 WordPress 主题导航菜单使用的颜色。 要了解您的主题中使用了哪些颜色,您可以使用浏览器中的检查工具(右键单击网站并“检查元素”或按 F12)。

获得十六进制颜色代码后,您可以将其粘贴到文本文件中以备后用。 接下来,您需要访问超级菜单设置页面,单击“菜单主题”选项卡,然后单击“菜单栏”部分。

设置您的超级菜单
设置您的超级菜单

在这里,您可以替换超级菜单使用的背景颜色,以匹配主题导航菜单的颜色。 不要忘记单击“保存更改”按钮来存储您的设置。 现在我们已经配置了超级菜单设置,让我们继续创建我们的超级菜单。

首先,您需要访问外观 » 菜单页面,然后将顶级项目添加到您的导航中,这些项目可能与您网站上的主页相匹配。 然后在菜单屏幕上,您需要通过选中“最大超级菜单设置”下的框来启用超级菜单。

- 广告 -

之后,您需要将鼠标移动到菜单项上,您将看到菜单选项卡中出现一个“Mega Menu”按钮。 单击该按钮将打开一个弹出窗口。 在这里,您可以将任何 WordPress 小部件添加到大型菜单中,并选择要显示的列数。

您还可以单击小部件上的扳手图标来编辑小部件的设置。 不要忘记单击“保存”按钮来存储小部件设置。 完成后,您可以关闭弹出窗口并访问他们的网站以查看正在运行的大型菜单。

将选项分组到一个超级菜单中

主要的分组准则是:

  • 将选项划分为相关的集合,例如您在对资源用户的心智模型进行卡片排名研究后发现的选项;
  • 保持中等粒度。 不要为需要大量时间学习的大型团体提供多种选择。 另一方面,不要让单个组太小,以至于大型菜单中有大量用户必须花时间理解的组;
  • 为每个组使用简洁但描述性的标签。 记住网络写作的标准规则:从包含最多信息的词开始提高可读性,避免编造的术语;
  • 保持话语简短,切中要害; 动词的基本形式(“buy”)通常优于动名词(“will be purchase”);
  • 区分标签将帮助您的用户了解他们在寻找什么;
  • 对组进行排序。 您可以使用资源之间的固有顺序(例如对于工作流)或根据重要性,将最重要或最常用的组放在左上角(假设像葡萄牙语这样的从左到右的语言)来执行此操作;
  • 每个选项只显示一次。 重复选项让用户怀疑两次出现是相同还是不同。 此外,冗余使整个界面更大更复杂。

保持超级菜单简单

“保持简单”的标准可用性指南也适用于大型菜单。 仅仅因为您可以在其中放入任何东西并不意味着您应该这样做。 简单性适用于交互语义,至少与它适用于表示层一样。 更少的选项意味着更少的扫描、更少的理解和更少的错误。

尤其要避免使用比简单单击更高级交互的小部件和其他界面元素。 超级菜单是屏幕上的一个传递存在,不应取代对话框,对话框是更复杂交互的自然场所,可以更好地处理它们。 除其他好处外,对话框具有默认分配方法(确定/取消按钮),在取消之前一直保留在屏幕上,如果用户需要查看框隐藏的内容,可以移动对话框。

- 广告 -

同样 - 但更糟糕的是 - 将搜索框隐藏在大型菜单中。 这很糟糕,原因有二:

  • 搜索框应该在页面上持续可见,而不是在用户激活超级菜单时才显示。
  • 拥有图形小部件(一个文本字段和一个命令按钮)使大型菜单成为一个重要的交互区域,而不是一个简单的导航菜单。

超级菜单的可访问性

因为动态屏幕元素总是有可能导致可访问性问题,所以使用屏幕阅读器和其他辅助技术对它们进行编码很重要。

即使编码正确,大型菜单也会给使用屏幕放大镜放大屏幕小部分的弱视用户带来问题。 (同样的问题会影响智能手机和平板电脑用户。)使用小屏幕或屏幕放大镜,只能看到大菜单的一小部分。

用户可以假设可见内容是所有可用内容,因此如果有太多视觉障碍客户,该站点可能会失去订单(这是针对老年用户的站点的常见情况)。 为菜单边框提供强大的视觉信号是缓解此问题的一种方法。

此外,大型菜单中的微小选项会导致触摸屏上的选择错误,并且过于苛刻的显示/隐藏行为会伤害身体残疾的人。

- 广告 -

有两种主要方法可以提高超级菜单的可访问性:

  • 简单:不必担心下拉菜单可访问。 取而代之的是,让每个顶级菜单选项都可点击,从而生成一个普通网页,您可以在其中以简单、完全可访问的 HTML 形式显示所有下拉选项。
  • 高级:使用 jQuery 插件编辑后端站点,这将使大型菜单屏幕阅读器可访问。 这还需要对 HTML 和 CSS 进行结构更改。

如果您是一家大公司和/或特别关注可访问性,您应该同时实现简单和高级功能。 然而,大多数网站可能不得不接受一种简单的方法。

充分利用您的超级菜单

超级菜单可以提高您网站的导航性。 通过帮助用户找到更多信息,他们将帮助您销售更多产品(或实现其他业务目标,例如吸引捐款或向政府或非营利网站传播有用信息)。

现在,将其留在评论中,您的网站上是否有或使用超级菜单? 我已经知道这个功能了。 借此机会阅读更多关于 WordPress 在我们的网站上。

- 广告 -
paulo fabris的头像

保罗·法布里斯(Paulo Fabris)自从电视曼彻特(Manchete)时代起就一直是新闻记者,作家,角色扮演游戏玩家,游戏玩家,角色扮演者,书呆子和动漫迷。