我正在开发一家旅行社网站，我正在尝试使用 HTML、CSS 和 JavaScript 实现响应式导航菜单。
我希望菜单在桌面和移动设备上都能正常运行。
标记：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Destinations</a></li>
<li><a href="#">Book Now</a></li>
</ul>
</nav>
问题：如何使此导航菜单具有响应能力，以便它在移动设备上折叠成汉堡菜单并在桌面设备上展开？
我尝试过使用 CSS 媒体查询，但我不确定如何实现汉堡菜单图标和切换功能。任何帮助或指导将不胜感激！
有多种方法可以实现此功能。但我尝试尽可能简单地使用
HTMLCSSJavaScript我还添加了
Fontawesome CDNCSShamburgertimes我还添加了主体内容来检查它是否完美。您可以保留当前的代码和
navbar这是更新后的代码：
document.addEventListener("DOMContentLoaded", function () {
const menuIcon = document.querySelector(".menu-icon");
const hamburger = document.getElementById("hamburger");
const cross = document.getElementById("cross");
const navLinks = document.getElementById("nav-links");
menuIcon.addEventListener("click", function () {
hamburger.style.display =
hamburger.style.display === "none" ? "block" : "none";
cross.style.display =
cross.style.display === "none" ? "block" : "none";
navLinks.classList.toggle("show");
});
});body {
margin: 0;
padding: 0;
}
main {
padding: 8px;
}
nav {
background-color: #333;
color: #fff;
padding: 15px;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
.menu-icon {
display: none;
cursor: pointer;
position: relative;
font-size: 24px;
}
@media (max-width: 768px) {
nav ul {
display: none;
flex-direction: column;
width: 100%;
text-align: center;
position: absolute;
top: 52px;
left: 0;
background-color: #333;
margin: 0;
padding: 0;
}
nav ul.show {
display: flex;
}
nav ul li {
margin: 15px 0;
}
.menu-icon {
display: block;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
integrity="sha512-<hash>"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<header>
</head>
<body>
<nav>
<div class="menu-icon">
<i class="fas fa-bars" id="hamburger"></i>
<i class="fas fa-times" id="cross" style="display: none"></i>
</div>
<ul id="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Destinations</a></li>
<li><a href="#">Book Now</a></li>
</ul>
</nav>
</header>
<main>
<h1>Main content</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
temporibus porro pariatur eum molestias, iure nisi assumenda quidem
harum vitae, odio unde! Molestiae consequatur omnis rem saepe laboriosam
iusto corporis.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
temporibus porro pariatur eum molestias, iure nisi assumenda quidem
harum vitae, odio unde! Molestiae consequatur omnis rem saepe laboriosam
iusto corporis.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
temporibus porro pariatur eum molestias, iure nisi assumenda quidem
harum vitae, odio unde! Molestiae consequatur omnis rem saepe laboriosam
iusto corporis.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
temporibus porro pariatur eum molestias, iure nisi assumenda quidem
harum vitae, odio unde! Molestiae consequatur omnis rem saepe laboriosam
iusto corporis.
</p>
</main>
</body>
</html>