如何使用 HTML、CSS 和 JavaScript 创建一个简单的移动响应式导航栏
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
导航栏是网站和Web应用程序中常用的重要组件。作为软件开发人员，您需要能够创建和自定义导航栏，无论是为自己还是为客户项目。
本文将介绍如何使用 HTML、CSS 和 JavaScript 创建一个简单的移动响应式导航栏。本文假设您已具备 HTML、CSS 和 JavaScript 的基础知识。
让我们直接进入正题。
步骤 1 - 添加 HTML 标记
在添加导航栏的HTML标记之前，我们先从谷歌图标库导入一个汉堡菜单图标。我们将使用这个汉堡菜单图标在小屏幕上切换导航菜单。
要从谷歌导入并使用汉堡菜单图标，请将以下代码片段添加到 HTML 文件的头部：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
接下来，将以下标记添加到您的 HTML 文件中。稍后我会解释。
<header class="header">
<div class="nav-container">
<span class="logo">NavBar</span>
<nav class="nav">
<ul class="nav--ul__one">
<li class="nav-link"><a href="#">Home</a></li>
<li class="nav-link"><a href="#">Contact</a></li>
<li class="nav-link"><a href="#">About Us</a></li>
</ul>
<ul class="nav--ul__two">
<li class="nav-link"><a href="#">Login</a></li>
<li class="nav-link"><a href="#">Signup</a></li>
</ul>
</nav>
<span class="hamburger-menu material-symbols-outlined">menu</span>
</div>
</header>
HTML标记包含以下内容：
- 一个
<header>带有特定类名的元素，它header包裹着所有其他元素。 - 在 内部
header，你有一个div带有 类名 的容器nav-container。它div包裹着logo、导航链接和汉堡菜单。 <span>具有类名的元素logo。- 一个
<nav>类名为“main navigation container”的元素，它nav作为主导航容器。该容器包含导航链接和汉堡菜单图标。 - 在 内部
<nav>，你有两个导航链接列表，每个链接分别用和<ul>类表示。nav--ul__onenav--ul__two - 您还有另一个
<span>元素，它具有类名hamburger-menu和图标类material-symbols-outlined，该图标代表汉堡菜单图标。
结果如下：
完成这些步骤后，现在让我们添加一些样式，使我们的导航栏在视觉上更具吸引力。
步骤 2 - 设置导航栏样式
我们将首先重置页面上每个元素的默认内边距和外边距，并为一些元素添加一些基本样式。
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
现在我们已经完成了一些基本的样式设置，接下来让我们专注于核心导航栏本身的样式设置。
导航菜单样式
以下是用于设置导航样式的标记：
header {
background: #4D4DDB;
color: white;
padding: .5rem 0;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
margin: 0 auto;
}
.nav-container .logo {
font-size: 2rem;
font-weight: bold;
}
.nav {
display: flex;
flex-grow: 1;
}
.nav--ul__one {
margin: 0 auto;
}
.nav-container, .nav--ul__one,
.nav--ul__two {
display: flex;
gap: 1.6rem;
font-size: 1.2rem;
}
.hamburger-menu {
display: none; /* Hidden by default for larger screens */
cursor: pointer;
}
我们的导航栏看起来会是这样：
接下来，我们添加一些媒体查询，使我们的导航栏能够响应移动设备。
@media (max-width: 700px) {
.nav-container .logo {
font-size: 1.2rem;
z-index: 2;
}
.nav {
flex-direction: column;
gap: 2rem;
}
.nav--ul__one,
.nav--ul__two {
flex-direction: column;
gap: .6rem;
}
.hamburger-menu {
display: block;
z-index: 2;
}
.nav {
position: absolute;
top: 0;
right: -100%;
bottom: 0;
width: 100%;
padding-top: 6rem;
align-items: center;
text-align: center;
background-color: #4D4DDB;
color: white;
transition: 0.15s ease-in-out;
}
.nav.active {
right: 0;
}
}
首先，这样可以调整小屏幕上的元素布局，最重要的是，nav激活时会从右侧滑入，但当然，它目前还不能正常工作。我们接下来会实现这个功能。
以下是目前的结果：
接下来，我们来看下一节的功能介绍。
步骤 3 - 添加 JavaScript 功能
以下是我们将用于向导航栏添加 JavaScript 功能的步骤：
- 获取有关该
hamburger-menu和的参考文献nav - 为以下对象添加点击事件监听器：
hamburger-menu - 切换
active类以nav显示/隐藏它
const hamburgerMenu = document.querySelector(".hamburger-menu");
const nav = document.querySelector(".nav");
hamburgerMenu.addEventListener("click", () => {
nav.classList.toggle("active")
});
点击该hamburger-menu按钮，可通过添加或删除类来切换菜单的可见性active。
最终结果：
这样，你就成功地仅使用 HTML、CSS 和 JavaScript 构建了一个移动响应式导航栏。
结论
衷心希望您觉得这篇文章有趣或有用。如果您觉得有用，请点赞、分享给您的朋友或关注我的账号，这样您就不会错过任何未来的文章。感谢阅读。
文章来源：https://dev.to/luwadev/how-to-create-a-simple-mobile-responsive-navigation-bar-with-html-css-and-javascript-341h