CSS Styles for Dropdownlist

引言

下拉菜单是一种设计模式，通过它我们可以隐藏或显示一个下拉框，方便用户浏览网站和应用程序。当用户点击或悬停在菜单上时，它会优雅地显示预定义的内容或项目列表。

在本文中，我们将探讨创建引人入胜的下拉菜单的艺术，这些菜单可以无缝集成到导航栏或网页项目的任何部分。首先，我们从纯 CSS 解决方案、:focus 和 :focus-within 伪类以及一个复选框技巧开始。然后，我们将深入学习如何利用 JavaScript 并解决纯 CSS 方法所面临的限制。

我们还将讨论为大屏幕和小屏幕构建下拉菜单，并使用语义化 HTML 元素和 ARIA 属性来辅助屏幕阅读器。

使用 CSS :focus 伪类创建下拉菜单>

我们可以开始构建一个可访问的下拉菜单，首先在适当的地方使用语义化和交互式 HTML5 元素。

借助以下代码，我们可以建立一个简单的菜单按钮及其相关的下拉项目。

在这里，<button> 元素是一个交互式元素，用于触发下拉菜单的打开。为了确保可访问性，我们对下拉菜单项使用无序列表；这使得屏幕阅读器能够识别下拉菜单中的链接数量。

让我们应用 CSS 属性。

在上面的代码中，我们提供了配置，将下拉框定位在菜单按钮下方。借助上面的代码，我们实现了容器元素的 position: relative 属性和实际下拉菜单的 position: absolute 属性。

现在让我们看看完整的代码。

HTML 代码

输出

使用 CSS 复选框技巧切换下拉菜单

在之前的代码中，当用户将鼠标从菜单中移出时，选项会消失。但是借助巧妙的 CSS 选择器，我们可以使用 HTML 复选框的选中状态来切换下拉菜单。

现在，在之前的代码中，让我们用一个输入复选框替换按钮元素。

现在，让我们在旧的 CSS 文件中添加一些 CSS 样式。

现在我们需要将不透明度设置为 0 来隐藏输入复选框，而不是使用 display: none; 属性。此外，我们必须确保当用户与按钮交互时，按钮会获得焦点。

现在让我们用 :checked CSS 伪选择器替换 :focus 或 :focus-within。

添加转换效果

现在，我们需要添加一个垂直打开选项的过渡效果。因此，我们需要在下拉菜单激活前后更新 .dropdown-content 的样式。

现在让我们看看完整的代码。

HTML 代码

输出

使用 CSS + JavaScript 创建下拉菜单

在之前的代码中，我们只借助 HTML 和 CSS 创建了下拉列表。现在，让我们借助 JavaScript 来切换下拉菜单，而不是使用复选框技巧来创建上述项目。让我们修改上面的代码。

在上面的代码中，我们不使用 CSS 伪类，而是使用我们将通过 JavaScript 添加到目标元素的自定义类名。

借助下面的 javascript 片段，我们实现了 javascript 过程。该过程从选择按钮、插入符号和下拉元素开始。然后，它监听按钮上的点击事件，并动态地向插入符号和下拉元素添加类。

让我们看看添加 javascript 代码后的完整代码。

HTML 代码

输出

让我们通过更新 ARIA 属性来更新上面的 HTML 代码。

此外，我们还必须根据 JS 文件中的当前状态更新 aria-expanded 属性。

将下拉菜单添加到导航栏

利用上述知识，让我们使用 CSS 将下拉菜单集成到导航栏中。

在此过程结束时，我们将成功开发一个响应式 CSS 下拉菜单。

代码

输出

导航栏和下拉菜单标记

在下面的代码中，我们创建了基本结构，其中包含三个主要菜单项：Home、Services 和 About。Services 项包含一个下拉功能，其中包含三个嵌套的 ul 子菜单项。

输出

它会给我们下面的输出。

移动优先的 CSS 下拉菜单设计

现在，让我们为移动设备创建一个导航菜单。为此，我们需要在 CSS 文件中添加一些 CSS 代码。

CSS 代码

输出

如果我们将屏幕分辨率更改为类似于手机分辨率，那么我们将得到以下输出。

与下拉块交互

现在我们需要借助 visibility 属性隐藏主下拉按钮，并且我们还需要将高度设置为 0。所以，我们需要更新我们的 CSS 文件。

现在，我们需要使用 checked CSS 伪选择器和 focus-within 伪类来切换主下拉菜单并激活 Services 下拉菜单。现在 CSS 文件变为：

为下拉菜单项添加滑动效果过渡

为了更好的外观，我们需要借助以下内容添加一些动画。

使用 CSS 为大屏幕设计下拉菜单

现在我们需要添加 CSS 媒体查询，并定义屏幕宽度为 640px 及以上的样式规则。