求助：如何为自定义Hamburger Menu添加侧边菜单显隐功能

没问题！我来帮你把侧边菜单和你的现有汉堡按钮完美整合——完全不用移除那些作为Logo的条形元素。咱们直接上修改方案，一步到位：

1. 更新HTML结构 #

首先，在你的汉堡按钮容器旁边添加侧边菜单的HTML结构，用来放Home、Works这些导航选项：

<!-- 你的现有汉堡按钮容器 -->
<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar6"></div>
  <div class="bar5"></div>
</div>

<!-- 新增的侧边菜单 -->
<nav class="sidebar-menu">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#about">About</a></li> <!-- 可以按需添加更多选项 -->
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

2. 扩展CSS样式 #

接下来，给侧边菜单添加基础样式，并且通过汉堡按钮的change类来控制菜单的显示/隐藏（和按钮动画同步）：

/* 你的现有CSS代码保持不变，新增以下内容 */

/* 侧边菜单基础样式 */
.sidebar-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px; /* 菜单宽度，可按需调整 */
  height: 100vh; /* 占满整个视口高度 */
  background-color: #2d2d2d; /* 菜单背景色，可自定义 */
  padding-top: 120px; /* 避开顶部的汉堡按钮位置 */
  transform: translateX(100%); /* 初始状态：移出右侧视口 */
  transition: transform 0.4s ease; /* 和按钮动画时长一致，保证流畅 */
  z-index: 98; /* 比汉堡按钮的z-index低，确保按钮始终在菜单上方 */
}

/* 菜单列表样式 */
.sidebar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin: 24px 32px; /* 菜单项间距 */
}

.sidebar-menu a {
  color: #fff; /* 文字颜色 */
  text-decoration: none;
  font-size: 22px; /* 文字大小 */
  font-weight: 500;
  transition: color 0.3s;
}

.sidebar-menu a:hover {
  color: #ccc; /* hover时的文字颜色 */
}

/* 关键：当汉堡按钮激活change类时，显示菜单 */
.container.change + .sidebar-menu {
  transform: translateX(0); /* 移回视口内 */
}

3. 保留现有JavaScript（可选优化） #

你原来的JS函数完全可以继续使用，因为它已经负责切换汉堡按钮的change类了，而我们通过CSS的相邻兄弟选择器已经把菜单的显示状态和这个类绑定在了一起：

function myFunction(x) {
  x.classList.toggle("change");
}

可选优化：提升用户体验 #

如果想让菜单更易用，还可以添加两个小功能：

• 点击菜单链接时自动关闭菜单
• 点击页面空白处自动关闭菜单

只需要在你的JS里新增这段代码：

// 点击菜单链接时关闭汉堡菜单
document.querySelectorAll('.sidebar-menu a').forEach(link => {
  link.addEventListener('click', () => {
    document.querySelector('.container').classList.remove('change');
  });
});

// 点击页面空白处关闭菜单
document.addEventListener('click', (e) => {
  const container = document.querySelector('.container');
  const sidebar = document.querySelector('.sidebar-menu');
  // 判断点击的元素是否不在按钮和菜单内
  if (!container.contains(e.target) && !sidebar.contains(e.target)) {
    container.classList.remove('change');
  }
});

这样就完成啦！现在点击你的汉堡按钮时，不仅按钮会有动画效果，侧边菜单也会平滑滑入；再次点击（或者点击链接/空白处），菜单会滑出，按钮也恢复初始样式。

内容的提问来源于stack exchange，提问作者Igor Viegas