如何仅为移动端适配hamburger菜单 用CSS和JavaScript实现

你已经在现有HTML中添加了汉堡菜单的基础结构，只需要新增响应式CSS规则和少量JavaScript代码即可完成移动端适配，完全不会影响你已经调试好的桌面端菜单效果。

第一步：新增CSS样式 #

/* 汉堡按钮基础样式 */
.hamburger {
  display: none; /* 桌面端默认隐藏 */
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 10px;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #333; /* 可改成和你导航适配的颜色 */
  transition: 0.3s all ease;
}

/* 汉堡激活时变成叉的效果 */
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 移动端响应式规则，断点768px可自行调整 */
@media (max-width: 767px) {
  .navbar-mega {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* 移动端默认隐藏所有菜单项 */
  .dropdown-mega {
    display: none;
  }
  /* 激活状态下显示菜单项，垂直排列 */
  .navbar-mega.active .dropdown-mega {
    display: block;
    width: 100%;
    background-color: #fff; /* 可改成你导航的背景色 */
  }
  /* 移动端显示汉堡按钮 */
  .hamburger {
    display: flex;
  }
  /* 移动端展开时导航容器自适应高度 */
  .navbar-mega.active {
    flex-wrap: wrap;
  }
  /* 移动端下拉内容适配屏幕宽度 */
  .dropdown-content-mega {
    position: static;
    width: 100%;
  }
  .row-mega {
    flex-direction: column;
  }
}

第二步：添加JavaScript交互代码 #

把这段代码放在页面</body>标签之前即可：

const hamburger = document.querySelector('.hamburger');
const navBar = document.querySelector('.navbar-mega');

hamburger.addEventListener('click', () => {
  // 切换汉堡按钮和导航的激活状态
  hamburger.classList.toggle('active');
  navBar.classList.toggle('active');
});

// 点击页面其他区域自动收起菜单（可选功能）
document.addEventListener('click', (e) => {
  if (!navBar.contains(e.target)) {
    hamburger.classList.remove('active');
    navBar.classList.remove('active');
  }
});

注意事项 #

• 你原有的HTML代码中将导航结构放在了<head>和<body>标签之间，建议把所有导航相关的HTML代码挪到<body>标签内部，避免部分浏览器出现渲染异常。
• 样式代码中的颜色、断点数值可以根据你的设计需求自行调整，不会影响核心交互逻辑。

内容的提问来源于stack exchange，提问作者sadique shahriar