基于Checkbox实现的Hamburger Menu侧边栏无法显示问题求助

你的汉堡菜单侧边栏没正常显示，核心问题是CSS选择器和HTML元素不匹配，加上缺少汉堡按钮的视觉样式，导致功能和显示都异常。以下是具体修复步骤和完整代码：

问题分析 #

1. CSS中用.menu类选择器定义侧边栏样式，但HTML里侧边栏是带id="menu"的<header>元素，两者不对应，样式根本没作用在侧边栏上。
2. 没有给汉堡线条添加样式，用户看不到汉堡按钮的视觉形态。
3. HTML末尾多了一个多余的</header>标签，结构不规范。

修复方案 #

1. 匹配选择器 #

把HTML里的<header id="menu">改为<header class="menu">，让CSS样式能正确作用到侧边栏上。

2. 添加汉堡按钮样式 #

给汉堡线条和隐藏复选框添加CSS，实现汉堡图标和点击交互的视觉反馈。

3. 清理HTML结构 #

移除末尾多余的</header>标签，保证结构合法。

完整修复代码 #

CSS部分 #

/* 隐藏默认复选框 */
.hamburger_menu input[type=checkbox] {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  right: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

/* 汉堡线条样式 */
.hamburger_line1, .hamburger_line2, .hamburger_line3 {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 4px;
  background: #333;
  z-index: 4;
  transition: transform 0.5s ease;
}

.hamburger_line2 {
  top: 30px;
}

.hamburger_line3 {
  top: 40px;
}

/* 侧边栏样式 */
.menu {
  position: relative;
  z-index: 3;
  width: 300px;
  margin: -100px -50px 0 0;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  transform-origin: 100% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s ease;
}

/* 点击复选框后显示侧边栏 */
input[type=checkbox]:checked ~ .menu {
  transform: none;
}

/* 点击后汉堡线条变为叉号 */
input[type=checkbox]:checked ~ .hamburger_line1 {
  transform: rotate(45deg) translate(5px, 5px);
}

input[type=checkbox]:checked ~ .hamburger_line2 {
  opacity: 0;
}

input[type=checkbox]:checked ~ .hamburger_line3 {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* 侧边栏链接样式优化 */
.menu div {
  margin: 15px 0;
}

.menu a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

HTML部分 #

<div class="hamburger_menu">
  <input type="checkbox">
  <div class="hamburger_line1"></div>
  <div class="hamburger_line2"></div>
  <div class="hamburger_line3"></div>
  <header class="menu">
    <div><a href="#">Home </a></div>
    <div><a href="#">About</a></div>
    <div><a href="#">Info </a></div>
    <div><a href="#">Contact</a></div>
    <div><a href="#" target="_blank">Show me more</a></div>
  </header>
</div>

修复效果说明 #

• 现在点击汉堡图标（右侧三条横线），侧边栏会从右侧滑入显示，同时汉堡图标变为叉号；再次点击，侧边栏滑出，图标恢复。
• 侧边栏的背景和样式正常生效，不再只显示带下划线的链接文本。

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