赞美明确的单击菜单

当我学习如何使用CSS建立一个悬停触发的子菜单时，我仍然记得我的兴奋。 （这可能是在将2003年从名单中读取的文章之后。）当时，这是一个真正的CSS伎俩。严重地。狂野时期。

＆lt; ul class =＆＃34;我的菜单＆＃34;＆gt; ＆lt; li＆gt; ＆lt; a href =＆＃34;页面-a.html＆＃34;＆gt;页面a＆lt; / a＆gt; ＆lt; ul＆gt; ＆lt; li＆gt;＆lt; href =＆＃34; page-b.html＆＃34;＆gt; page b＆gt;＆gt;＆gt;＆gt;

/ *位置子菜单相对于父列表项* /。我的菜单li {位置：相对;相对;}。我的菜单ul {/ *隐藏我的子宫默认* /显示：无; / *位置子菜单，打开* /位置：绝对;左：0; TOP：100％;} / *看，马！没有onclick处理程序！ * /。我的菜单li：悬停和gt; UL {显示：块;}

这些天，我们可以通过更新的技巧提高CSS的使用率！使用键盘导航时，菜单可以打开和关闭，得益于：焦点 - 内部。

但是，当我第一次学到这些技巧时，我已经改变了，所以我已经从那以后，我建立了一堆网站，并学到了更多关于可用性，访问性和内容策略的更多信息。现在，我发现悬停悬停的菜单缺乏所有这些前锋。因此，几年前，我退出了悬停悬停的子菜单并切换到点击触发的子菜单。 （从这里，我会打电话给他们“烤羊菜单”和“点击菜单”。）

我想你应该停止建立烤羊菜单。我在这里告诉你为什么。

很简单，对吗？箭头图标向我们展示除“家”之外的每个项目都有子菜单。但是如果这些子菜单出现在悬停上，则至少有四种方式可以使用，并且您可能已经经历过所有四个。

顶部“父”菜单项链接到页面和每个子菜单项链接到另一个页面。对于上面的示例，“服务”将是一个唯一的页面，因此“服务”子菜单中的每个链接都可以。

父项具有href =＆＃34;＃＆＃34; - 甚至没有HREF😱 - 并且唯一的功能链接位于子菜单中。在我们的示例中，“服务”仍然是一个链接，但在点击它时，没有任何反应。

这个不一致 - 是父项是链接还是不是？ - 当我观看人们使用网站时，导致很多混淆。有些人跳过过去的有用的顶级页面，假设这些项目不是链接。然而，其他人假设顶级链接是页面并尝试单击它们。

这导致你遇到的第三和第四个不如此伟大的模式。我的猜测是，这些尝试从尝试弥补了由前两个设置引起的混乱。

父项和第一个子菜单项链接到同一页面。使得更糟糕的是，具有不同链接文本的父项和第一个子菜单链接违反了WCAG 2.1级AA可访问性标准。

父项链接到包含无用绒毛内容的页面或仅包含子菜单中的链接。页面本身对访问它的任何人没有任何真正的目的。

这些最后两种配置浪费时间的人们知道父项是具有冗余或无用内容的链接。

父项将是与第一个子菜单链接相同页面的链接吗？

即使父项是一个唯一的链接，它是否值得查看？

这让我们没有好的选择。它使得不可能满足JAKOB的可用性定律，“用户更喜欢您的网站与他们已经知道的所有其他网站相同的方式工作。”悬停菜单时没有标准实施，因此我们需要做一些不同的东西来提供一致的用户体验。

可能是我看到的最不常见的菜单类型使用父项是链接的“拆分按钮”设计，并打开单独的下拉图标并关闭菜单。二十五十五默认WordPress主题使用该模式。因为它是如此罕见，我发现访问者经常忽略顶级页面链接，研究表明，用户不会将标签和图标视为单独点击。

而不是依赖悬停互动或其他“创意”（以及令人困惑的）解决方案，让我们构建菜单，其中父项是按钮，在单击时显示和隐藏子菜单的按钮。这会立即解决悬停菜单问题，因为单击明确的菜单工作。

除了没有子菜单的顶级项目外，所有链接都包含在子菜单中（例如“家”）。我们将在一瞬间处理这些顶级页面发生的事情。

当您考虑它时，单击菜单实际上是我们预期的大多数其他背景：

使用除鼠标以外的任何东西？按ENTER或激活任何类型的交换机控制的链接更等于单击，而不是：焦点相当于：悬停。

无论您的设备或输入模式如何，“单击”是更普遍和稳健的交互。让我们用它来让我们的网站菜单令人敬畏！

我的肠道感觉说，最近有很多网站转换为点击菜单。加入派对！随着越来越多的网站使得改变，人们将再次发展对“网站工作”（从而满足JAKOB的法律）的简单和有益的期望。

当你第一次改变时，有些访客可能仍然期待悬停菜单。如果你问，他们甚至可能会说他们更喜欢他们。我可以告诉你的观看人们使用点击菜单，是每个人都迅速计算并调整。

不要只是为了它而拿走我的话！ U.S. Web设计系统（USWDS）导航模式使用点击菜单。这是他们要说的话：

避免使用悬停以扩展下拉列表。对于某些用户来说，悬停很困难，并且无法在触摸屏上使用。下拉列表应在单击或使用键盘导航时进行扩展。

它真正归发为用户意图。悬停状态的目的是表示某些东西可点击（带下划线的文本）......点击的目的是实际做某事，采取明确的动作。打开下拉列表是一个明确的动作，只能在点击内完成。

下拉链路中的插座相当于下划线链接：它为单击此元素时会发生的事情提供了一些可供选择。不要误认为提供足够的信息来弹出悬停的下拉目。

因此，这并不像我们在这里探索未知的领土。而且，UK.Gov设计系统有另一个好提醒：也许你甚至不需要子菜单！他们的菜单只是一个链接列表，使用链接和手风琴的页面网格来帮助访问者导航。哎呀，您也不会发现CSS技巧的子菜单！

您决定是否需要一个类别/概述/登陆页面......或者不需要！而不是使用内容与其他链接的链接匹配菜单的结构，而不是其他链接的链接，您的内容策略和信息架构决定了您需要的页面类型以及它们的标记方式。如果您的服务概述有助于您的访客，请将“服务概述”或“所有服务”作为“服务”子菜单中的第一个项目。

子菜单保持打开，直到它们关闭。当人们撞击光标或甚至尝试点击子菜单链接时，烤羊菜肴有一种令人讨厌的消失方式。尤其是“飞出”而不是在父项下方的子菜单中的情况。单击菜单的持久性使得更多“坚实”体验，因此用户信任界面，不要沮丧。

持久的子菜单行为对于Megamenus来说更为重要。当访问者需要更多时间才能参加子菜单内容时，他们无法意外地关闭菜单。

“移动”和“桌面”菜单的JavaScript是相同的。如果菜单是隐藏在汉堡包后面还是在移动设备上可见，则交互总是相同的。我只需要更改CSS来进行响应的单击菜单。

当我开始建立自己的可访问单击菜单脚本时，我发现没有单个标准如何进行。我自己的思想和代码受到最严重影响：

您点击以显示子菜单的元素应该是＆lt;按钮＆gt;由于它没有链接到页面。

使用aria-algended（在＆lt;按钮和gt ;!上）传达子菜单的开放和封闭状态。

使用显示：无或可见性：隐藏使键盘用户无法在关闭时访问子菜单。

不要使用角色=＆＃34;菜单＆＃34; （以及整个aria菜单模式）或aria-haspopup。那些感觉相关，但他们不适合建造导航菜单。

关闭一个开放子菜单：当用户在焦点内部在开放子菜单内时按下ESC键。 （并非所有用户都期待这一点，但我认为这是一个很好的触感。）

由于单击菜单需要JavaScript，因此我们应该考虑如何在JavaScript出于任何原因的情况下逐步增强此菜单。我们的经典悬停CSS技巧仍然有利于毕竟！

我开始构建我的点击菜单作为使用li：hover＆gt的css--only hover菜单; ul和li：焦点 - 内部＆gt; UL显示子菜单。然后，我使用JavaScript来创建＆lt;按钮＆gt;元素，设置ARIA属性，并添加事件处理程序。这意味着菜单仍然在没有JavaScript的情况下，使用WordPress中建立的链接菜单很好地播放，我的CMS选择。

您可以查看我在下面使用的脚本，但我将成为第一个承认可能更好的脚本。 重要的是您将其与真实用户测试...并停止使用悬停菜单。 😃