移动端汉堡菜单切换

本课属于 Coddy HTML 学习旅程的“JavaScript 实战”单元。第 13 课，共 27 课。

在小屏幕上，网站通常会使用汉堡菜单（☰）图标，而不是显示完整导航栏。用户点击汉堡菜单图标时，JavaScript 会切换导航菜单的显示状态。

首先，创建基本的 HTML 结构：一个包含 3 个 <nav> 的按钮（在 CSS 中将它们设置为线条，组成汉堡图标），以及一个隐藏的 <nav>，其中包含菜单链接。

<button id="burger-btn" class="burger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<nav id="mobile-nav" class="hidden">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

现在，我们来添加一些基础 CSS，为汉堡菜单添加样式：

.burger-menu {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

.hidden {
  display: none;
}

/* 当导航元素没有 hidden 类时显示它 */
nav:not(.hidden) {
  display: block;
}

现在，添加 JavaScript 来切换菜单：

// 选中汉堡菜单按钮和移动端导航栏
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// 为汉堡菜单按钮添加点击事件监听器
burgerBtn.addEventListener('click', function() {
  // 切换移动端导航栏的 hidden 类
  mobileNav.classList.toggle('hidden');
});

点击汉堡按钮时，导航菜单上的 hidden 类会切换，让菜单显示或隐藏。

挑战

简单

在汉堡按钮的事件监听器中添加两行代码：

切换按钮上的 "active" 类。这样会将三条线动画变成一个“X”。
切换菜单上的 "active" 类。这样会让导航菜单显示或隐藏。

亲手试试

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 汉堡菜单按钮 -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- 导航菜单 -->
  <nav id="myMenu" class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Philosophy</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- 主要内容 -->
  <header class="hero">
    <h1>Minimalism</h1>
    <p>Less but better. Enjoy the essentials, remove the noise.</p>
    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80" alt="Minimalist interior">
  </header>

  <section class="content">
    <h2>The Essence of Minimalism</h2>
    <p>
      Minimalism is not about having less, but about making room for what truly matters. 
      It is about quality over quantity, clarity over clutter, and creating spaces that breathe. 
      Whether in design or lifestyle, minimalism helps us live with purpose and appreciation.
    </p>
  </section>

  <script src="script.js"></script>
</body>
</html>