CSS下拉菜单,了解一下

  这篇文章是关于CSS力量的系列文章中的第二篇。

文章系列:

  1. 着色SVG背景
  2. 下拉菜单(本文)

  CSS变得越来越强大,并且通过CSS网格和自定义属性(也称为CSS变量)等功能,我们看到了一些非常有创意的解决方案。其中一些解决方案不仅围绕使网络更漂亮,而且使其更易于访问,并使样式可访问的体验更好。我肯定在这里!

  我们在网络上看到的常见UI模式是下拉菜单。它们用于分段显示相关信息,而不会通过按钮,文本和选项压倒用户。我们在网站的标题或导航区域内看到了很多内容。
谷歌搜索“下拉菜单”会产生很多例子
  让我们看看我们是否可以单独用CSS制作其中一个菜单。我们将在nav组件中创建一个链接列表,如下所示:

See the Pen QZwKeq by Edwardvoon (@edwardsvoon) on CodePen.

  现在,假设我们想要第二个导航项目的子菜单下拉列表。我们可以在那里做同样的事情,并在该列表项中包含一个链接列表:

See the Pen 下拉菜单2 by Edwardvoon (@edwardsvoon) on CodePen.

  我们现在拥有双层导航系统。为了在我们希望内容可见时隐藏和显示内容,我们需要应用一些CSS。为了清晰起见,以下示例中已删除所有样式属性:

See the Pen YJPpxW by Edwardvoon (@edwardsvoon) on CodePen.

See the Pen BqyQww by Edwardvoon (@edwardsvoon) on CodePen.

  现在,子菜单下拉列表被隐藏,但当我们将鼠标悬停在导航栏中的相关父级上时,它将被显示并变为可见。通过样式ul li ul,我们可以访问该子菜单,通过样式ul li ul li,我们可以访问其中的各个列表项。

  这开始看起来像我们想要的,但我们现在还远没有完成。Web可访问性是产品开发的核心部分,现在是实现这一目标的绝佳机会。添加role=”navigation”是一个良好的开端,但为了使导航栏可以访问,人们应该能够通过它进行选项卡(并以合理的顺序专注于正确的项目),并且还有一个屏幕阅读器可以准确地读出什么是专注于。

  您可以将鼠标悬停在任何列表项上,并清楚地看到正在悬停的内容,但这不适用于标签导航。继续尝试选择上面的示例。你无法直观地看到焦点的位置当你在主菜单中选中两个时,你会看到一个焦点指示环,但是当你选择下一个项目(其中一个子菜单项)时,该焦点就会消失。

  现在,重要的是要注意理论上你专注于这个其他项目,并且屏幕阅读器能够解析它,阅读Sub-One,但键盘用户将无法看到正在发生的事情并将失去踪迹。

  之所以发生这种情况,是因为,当我们对父元素的悬停进行样式设置时,只要我们将焦点从父级转移到该父级中的一个列表项,我们就会失去该样式。从CSS的角度来看,这是有道理的,但这不是我们想要的。

  幸运的是,有一个新的CSS伪类,它将在这种情况下给出我们想要的东西,并且它被称为:focus-within

解决方案:focus-within

该:focus-within伪选择是一部分CSS选择器4级规格,并告诉浏览器样式应用到父时,任何孩子都在关注的焦点。所以在我们的例子中,这意味着我们可以选择Sub-One并将:focus-within样式与:hover父级样式一起应用,并在导航下拉列表中查看我们的确切位置。在我们的例子中它将是ul li:focus-within > ul

See the Pen rqaWJg by Edwardvoon (@edwardsvoon) on CodePen.

See the Pen EdaNLY by Edwardvoon (@edwardsvoon) on CodePen.

  现在,当我们选择第二个项目时,我们的子菜单会弹出,当我们通过子菜单切换时,可见性仍然存在!现在,我们可以附加我们的代码以包含:focus状态:hover,为键盘用户提供与鼠标用户相同的体验。
![](https://ws1.sinaimg.cn/mw690/005SjPqBly1fvqixaut7ng30a20bi41p.gif)
  在大多数情况下,例如在直接链接上,我们通常可以编写如下内容:

See the Pen bmNBxM by Edwardvoon (@edwardsvoon) on CodePen.

  但在这种情况下,由于我们正在应用基于父级的悬停样式li,因此我们可以再次使用:focus-within,以便在标记时获得相同的感觉。这是因为我们实际上无法专注于li(除非我们添加一个tabindex=”0”)。我们实际上专注于其中的链接(a)。:focus-within允许我们li在关注链接时仍然将样式应用于父级(非常酷!):

See the Pen rqaWZE by Edwardvoon (@edwardsvoon) on CodePen.


  此时,由于我们正在应用焦点样式,我们可以执行通常不推荐的操作(删除蓝色轮廓焦点环的样式)。我们可以这样做:

See the Pen wYBoYm by Edwardvoon (@edwardsvoon) on CodePen.

  上面的代码指定当我们通过link(a)在列表项中聚焦时,不要将轮廓应用于链接项(a)。以这种方式编写它是非常安全的,因为我们只是为悬停状态设计样式,并且对于不支持的浏览器,:focus-within链接仍将获得焦点环。现在我们的菜单看起来像这样:

最终菜单使用:focus-within,:hover陈述和自定义聚焦环消失

See the Pen rqaWQX by Edwardvoon (@edwardsvoon) on CodePen.

什么是aria?

  如果您熟悉辅助功能,则可能听说过ARIA标签和状态。您可以利用这些优势同时创建具有内置辅助功能的这些类型的下拉菜单!包含ARIA标记时,您的代码看起来会更像这样:

See the Pen MPYbZR by Edwardvoon (@edwardsvoon) on CodePen.

  您将添加aria-haspopup="true"到下拉菜单的父级以指示备用状态,并包括aria-label="submenu"实际的下拉菜单本身(在本例中为我们的列表class="dropdown"

  这些属性本身将为您提供显示下拉菜单所需的功能,但缺点是它们仅适用于启用JavaScript

浏览器的兼容性

  说到报错,我们来谈谈浏览器的兼容性。虽然:focus-within确实有很好的浏览器支持,但重要的是要注意不支持Internet Explorer和Edge,因此这些平台上的用户将无法看到导航。

  这里的最终解决方案是使用两个aria标记和CSS :focus-within,以确保您的用户了喜欢这样的下拉效果。

See the Pen wYBobX by Edwardvoon (@edwardsvoon) on CodePen.

-------------本文结束感谢您的阅读-------------

本文标题:CSS下拉菜单,了解一下

文章作者:Edwardvoon

发布时间:2018年09月29日 - 15:09

最后更新:2018年09月29日 - 17:09

原始链接:https://edwardvoon.github.io/2018/09/29/Dropdown-Menus/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!