如何用HTML、CSS和JavaScript实现旅游网站的响应式汉堡导航菜单

步骤1：修改HTML结构 #

给导航添加汉堡按钮，并给链接列表加上类名方便控制：

<nav>
  <button class="hamburger">☰</button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Destinations</a></li>
    <li><a href="#">Book Now</a></li>
  </ul>
</nav>

步骤2：编写CSS样式 #

处理桌面端横向导航和移动端折叠菜单的样式，用媒体查询适配不同屏幕：

/* 基础导航样式 */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c3e50;
  padding: 1rem 2rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

/* 汉堡按钮默认隐藏（桌面端） */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 移动端适配（屏幕宽度≤768px时生效） */
@media (max-width: 768px) {
  /* 显示汉堡按钮 */
  .hamburger {
    display: block;
  }

  /* 默认隐藏移动端导航列表 */
  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    background-color: #2c3e50;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }

  /* 激活状态：显示导航列表 */
  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-links li {
    margin: 0.5rem 0;
  }
}

步骤3：添加JavaScript切换逻辑 #

监听汉堡按钮的点击事件，切换导航菜单的显示/隐藏状态：

const hamburgerBtn = document.querySelector('.hamburger');
const navLinksList = document.querySelector('.nav-links');

hamburgerBtn.addEventListener('click', () => {
  navLinksList.classList.toggle('active');
  // 切换汉堡图标为叉号，提升交互清晰度
  hamburgerBtn.textContent = navLinksList.classList.contains('active') ? '✕' : '☰';
});

关键说明 #

• 汉堡图标：用字符☰和✕实现，无需额外图标资源，也可以替换为SVG图标优化视觉效果
• 过渡动画：用transform和opacity实现平滑的显示/隐藏动画，避免生硬跳转
• 响应式断点：示例用768px作为移动端阈值，可根据你的网站设计调整为其他数值（比如640px）
• 交互优化：添加pointer-events: none让隐藏状态的菜单不响应点击，提升用户体验

内容的提问来源于stack exchange，提问作者Tanzeela Fatima