为导航栏添加切换菜单：768px以下屏幕适配代码修改问询

我来帮你把现有导航改成符合需求的响应式版本，在屏幕宽度≤768px时切换为汉堡按钮控制的菜单，同时把hover触发改为点击触发。咱们分三步完成：

1. 调整HTML结构 #

首先要添加汉堡切换按钮，并且给主菜单列表加个ID，方便后续用JS控制显示/隐藏：

<nav id="main-nav">
  <!-- 新增汉堡按钮 -->
  <button id="menu-toggle" aria-label="Toggle menu">☰</button>
  <!-- 给主菜单ul添加id -->
  <ul id="main-menu">
    <li>
      <a href="#">Home</a>
    </li>
    <li class="has-submenu">
      <a href="#">Menu 1</a>
      <ul class="submenu">
        <li><a href="#">Sub Menu 1.1</a></li>
        <li><a href="#">Sub Menu 1.2</a></li>
        <li><a href="#">Sub Menu 1.3</a></li>
        <li><a href="#">Sub Menu 1.4</a></li>
        <li><a href="#">Sub Menu 1.5</a></li>
        <li><a href="#">Sub Menu 1.6</a></li>
        <li><a href="#">Sub Menu 1.7</a></li>
      </ul>
    </li>
    <li class="has-submenu">
      <a href="">Menu 2</a>
      <ul class="submenu">
        <li><a href="#">Sub Menu 2.1</a></li>
        <li><a href="#">Sub Menu 2.2</a></li>
        <li><a href="#">Sub Menu 2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</nav>

2. 更新CSS样式 #

添加媒体查询处理小屏幕样式，隐藏默认主菜单，显示汉堡按钮，同时调整子菜单的触发逻辑（用类代替hover）：

* { margin: 0; padding: 0; box-sizing: border-box; }

#main-nav {
  background: #d3333b;
  position: relative; /* 让汉堡按钮绝对定位 */
}

#main-nav a { 
  color: #ffffff; 
  background: #d3333b; 
  display: block; 
  height: 48px; 
  font-family: Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-decoration: none; 
  transition: background 0.4s; 
}

#main-nav a:hover { background: #777; }

/* 桌面端样式 */
#main-menu {
  list-style: none; 
  display: flex; 
}

#main-menu li { 
  width: 100%; 
  text-align: center; 
  position: relative; 
}

#main-menu li:hover .submenu>li { 
  display: block; 
  top: 0px; 
}

.submenu li { 
  display: none; 
  position: absolute; 
  top: 0px; 
}

.submenu { 
  display: flex; 
  flex-direction: column; 
  position: absolute; 
  width: 100%; 
}

/* 汉堡按钮默认隐藏（桌面端） */
#menu-toggle {
  display: none;
  background: #d3333b;
  border: none;
  color: white;
  font-size: 24px;
  padding: 0 20px;
  height: 48px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}

/* 移动端媒体查询（≤768px） */
@media (max-width: 768px) {
  /* 隐藏主菜单，改为垂直布局 */
  #main-menu {
    flex-direction: column;
    display: none;
  }
  
  /* 显示汉堡按钮 */
  #menu-toggle {
    display: block;
  }
  
  /* 移动端主菜单显示时的样式 */
  #main-menu.active {
    display: flex;
  }
  
  /* 移动端子菜单默认隐藏，用类控制显示 */
  .submenu {
    position: static;
  }
  
  .submenu li {
    position: static;
    display: none;
  }
  
  /* 点击父菜单后显示子菜单 */
  .has-submenu.active .submenu li {
    display: block;
  }
}

.wrapper { 
  margin-right: auto; 
  margin-left: auto; 
  max-width: 960px; 
  padding-right: 10px; 
  padding-left: 10px; 
}

3. 添加JavaScript交互 #

处理汉堡按钮和父菜单的点击事件，切换菜单的显示状态：

// 获取元素
const menuToggle = document.getElementById('menu-toggle');
const mainMenu = document.getElementById('main-menu');
const subMenuTriggers = document.querySelectorAll('.has-submenu');

// 汉堡按钮切换主菜单
menuToggle.addEventListener('click', () => {
  mainMenu.classList.toggle('active');
});

// 父菜单点击切换子菜单
subMenuTriggers.forEach(trigger => {
  trigger.addEventListener('click', (e) => {
    // 阻止链接跳转（如果需要保留跳转可以去掉这行）
    e.preventDefault();
    trigger.classList.toggle('active');
  });
});

完整代码整合 #

把以上三部分整合到一起，就是最终的响应式导航栏代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Responsive Flexbox Dropdown Menu</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    #main-nav {
      background: #d3333b;
      position: relative;
    }

    #main-nav a { 
      color: #ffffff; 
      background: #d3333b; 
      display: block; 
      height: 48px; 
      font-family: Arial, Helvetica, sans-serif; 
      font-weight: bold; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      text-decoration: none; 
      transition: background 0.4s; 
    }

    #main-nav a:hover { background: #777; }

    #main-menu {
      list-style: none; 
      display: flex; 
    }

    #main-menu li { 
      width: 100%; 
      text-align: center; 
      position: relative; 
    }

    #main-menu li:hover .submenu>li { 
      display: block; 
      top: 0px; 
    }

    .submenu li { 
      display: none; 
      position: absolute; 
      top: 0px; 
    }

    .submenu { 
      display: flex; 
      flex-direction: column; 
      position: absolute; 
      width: 100%; 
    }

    #menu-toggle {
      display: none;
      background: #d3333b;
      border: none;
      color: white;
      font-size: 24px;
      padding: 0 20px;
      height: 48px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
    }

    @media (max-width: 768px) {
      #main-menu {
        flex-direction: column;
        display: none;
      }
      
      #menu-toggle {
        display: block;
      }
      
      #main-menu.active {
        display: flex;
      }
      
      .submenu {
        position: static;
      }
      
      .submenu li {
        position: static;
        display: none;
      }
      
      .has-submenu.active .submenu li {
        display: block;
      }
    }

    .wrapper { 
      margin-right: auto; 
      margin-left: auto; 
      max-width: 960px; 
      padding-right: 10px; 
      padding-left: 10px; 
    }
  </style>
</head>
<body>
  <nav id="main-nav">
    <button id="menu-toggle" aria-label="Toggle menu">☰</button>
    <ul id="main-menu">
      <li>
        <a href="#">Home</a>
      </li>
      <li class="has-submenu">
        <a href="#">Menu 1</a>
        <ul class="submenu">
          <li><a href="#">Sub Menu 1.1</a></li>
          <li><a href="#">Sub Menu 1.2</a></li>
          <li><a href="#">Sub Menu 1.3</a></li>
          <li><a href="#">Sub Menu 1.4</a></li>
          <li><a href="#">Sub Menu 1.5</a></li>
          <li><a href="#">Sub Menu 1.6</a></li>
          <li><a href="#">Sub Menu 1.7</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="">Menu 2</a>
        <ul class="submenu">
          <li><a href="#">Sub Menu 2.1</a></li>
          <li><a href="#">Sub Menu 2.2</a></li>
          <li><a href="#">Sub Menu 2.3</a></li>
        </ul>
      </li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </nav>

  <script>
    const menuToggle = document.getElementById('menu-toggle');
    const mainMenu = document.getElementById('main-menu');
    const subMenuTriggers = document.querySelectorAll('.has-submenu');

    menuToggle.addEventListener('click', () => {
      mainMenu.classList.toggle('active');
    });

    subMenuTriggers.forEach(trigger => {
      trigger.addEventListener('click', (e) => {
        e.preventDefault();
        trigger.classList.toggle('active');
      });
    });
  </script>
</body>
</html>

这个修改后的代码实现了：

• 桌面端保持原有的hover下拉菜单
• 屏幕宽度≤768px时，显示汉堡按钮，点击展开/收起主菜单
• 移动端所有子菜单通过点击父菜单触发展开/收起，不再依赖hover

内容的提问来源于stack exchange，提问作者Mischa Silver