原文： How to Build a Responsive Navigation Bar with a Dropdown Menu using JavaScript

导航栏是网站和 web 应用中经常使用的基本组件。作为一名 web 开发人员，你需要能够为客户的项目或者基本的作品集网站定制它。

在本指南中，你将学习如何只用 HTML、CSS 和 JavaScript 从头开始创建一个导航栏。你还将学习如何从无障碍方面优化它。

下面是这个导航栏的截图：

这个设计的灵感来自 Dribbble 上 Tran Mau Tri Tam 的极简导航栏。

为了简洁起见，我们将使用一个叫做 boxicons 的图标库来为这个导航栏导入某些图标。我强烈建议使用内联 SVG。

要使用这个库，请在你的 HTML 文件的 head 插入下面的片段：

该标记被分为三个主要部分：

所有这些元素都将被包裹在一个 header 标签中。为了更好地解释这一点，请复制下面的标记。

对于 nav-start，我们有以下元素：

nav-end 有以下元素：

对于汉堡包按钮：

下面是输出：

导航菜单 是导航链接所在的位置。用下面这个标记替换你先前添加的 nav 元素：

这里你有一个 nav 标签，它包含一个无序的列表，其中有五个 li 元素，代表每个导航菜单项目：browse、discover、 jobs、livestream 和 about。

前两个元素，browse 和 discover，是 button 元素，将被用来切换它们各自的下拉菜单。而元素 Jobs、livestream 和 about 只是普通的链接。

使用到目前为止的代码，你的结果应该是这样的：

接下来，让我们为每个导航按钮定义下拉元素。下面是第一个下拉菜单的标记。把你的标记中的第一个 li 元素替换成这样：

Shorts featured today by curators

Leading creatives livestreams

Gain exclusive access

See trending creations

你可以在这里获得 SVG 图标。

看看这个标记，我们添加了以下内容：

注意：由于通过img标签添加的图标是严格意义上的声明性的，我强烈建议你直接将它们作为SVG元素添加。我这样做只是为了使代码更容易阅读

下面是第二个下拉元素dropdown2的标记：

最终结果应该是这样：

本教程最后将提供完整的标记。

像往常一样，我们将从重置页面上每个元素的默认 margin 和 padding 开始，添加全局变量，并对一些元素进行一些基本的样式设计。

接下来，添加一些可重复使用的样式。

现在你已经得到了这些基本的样式，你可以专注于核心导航栏本身的样式。

下面是为导航栏容器设计的标记：

除了对下拉菜单进行样式设计外，还将使用 visibility 和 opacity 属性的组合来隐藏它。我们的想法是，只有在一个按钮被点击时才显示菜单。

接着，可以通过使用 active class 将 visibility 和 opacity 属性恢复到默认状态来切换该菜单。但我们将通过 JavaScript 来做这件事。

如果你喜欢完全隐藏菜单，可以用 display: none; 代替 opacity 和 visibility 属性。虽然这个属性在 CSS 中不能用过渡来做动画。

接下来，为搜索输入、按钮和个人资料图片添加样式，然后在桌面屏幕上隐藏汉堡包按钮。

现在它是这样的：

为了完成样式设计，添加媒体查询样式：

首先，这排列了元素，最重要的是，它定位 hamburger class 并将其隐藏。现在在平板电脑和手机屏幕上，导航栏是响应式的，汉堡包按钮是可见的。

这就完成了导航栏的样式设计。让我们在下一节中进行功能设计。

对于 JavaScript 功能，我们将专注于以下几个类别：

首先，使用 DOM 的 querySelector 方法选择你的类，并将它们存储在变量中，以便它们可以重复使用。

接下来在你的代码中添加下面的函数。我稍后将解释它们的用途。

下一步是获取下拉菜单的 ID。由于有两个下拉菜单，其值将基于点击的下拉按钮。

为了获得 ID，你将利用 dataset 属性，然后将该值存储到它自己的变量中。

理解这个片段：

这意味着，当 dataset 为 dropdown1 的按钮被点击时，id 为 dropdown1 的 div 元素被记录到控制台，反之则为 dropdown2 按钮。

切换菜单是相当容易的，因为你已经把下拉元素的 ID 存储到一个叫作 dropdownElement 的变量中。通过定位这个变量，你可以切换每个下拉元素的 active class。

除了切换下拉菜单外，我们还添加了一个条件，检查当前下拉元素的 id 是否与活动按钮相匹配。这可以确保每次只有一个下拉元素被展开。

aria-expanded 属性允许辅助技术告知一个交互式菜单是展开还是折叠的。要切换这个属性，请在 btn 代码块中的 e.stopPropagation() 下插入这段代码：

现在，只要下拉菜单是可见的，aria-expanded 属性就被设置为 true；而当菜单折叠时，它被设置为 false。

到目前为止，下拉菜单只有在点击按钮的时候才会折叠。它应该被折叠的其他情况包括：

通过调用前面创建的函数 closeDropdownMenu 和 setAriaExpandedFalse，可以折叠下拉菜单并将 aria-expanded 属性设置为 false。

下面是输出：

要在平板电脑和手机屏幕上看到导航栏，请将 toggleHamburger 函数作为汉堡包按钮的回调，然后在 links 代码块内调用该函数。

这会切换一个名为 show 的不同 class，控制显示或隐藏导航栏。

下面是最终的输出：

你可以添加更多下拉菜单，只需将任何一个列表项替换为按钮和下拉菜单的链接。为了使其发挥作用，请确保你更新以下内容：

下面是一个将 Jobs 链接转换为下拉菜单的例子。

这是最终的结果：

按照这个过程，你可以添加你想要的下拉菜单。

就这样，你用 HTML、CSS 和 JavaScript 成功地创建了一个带有下拉菜单的响应式导航栏。你还学会了如何使用包括 aria-expanded 属性在内的几个 aria 属性来使菜单可访问。

下面是测试这个导航栏运行情况的 CodePen 文件：

这是 GitHub 的代码链接。

我真诚地希望你觉得这篇文章有趣或有用。如果你这么想，请与你的朋友分享它或订阅我的博客，这样你就不会错过任何未来的文章。感谢阅读。

GitHub | Twitter | Blog | LinkedIn