纯CSS+Div实现5行汉堡菜单的技术求助

要实现5行汉堡菜单，核心问题是伪元素（:before/:after）只能额外生成2个元素，最多凑出3行，所以我们直接在汉堡容器里添加5个<div>来对应每一行，再配合CSS完成样式和动画，完全不需要JavaScript，符合你的安全要求。

步骤1：修改HTML汉堡结构 #

把原来单个<div>的汉堡容器，替换成5个<div>：

<div class="menu-wrap">
  <input type="checkbox" class="toggler">
  <div class="hamburger">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <!-- 原有菜单内容保持不变 -->
</div>

步骤2：更新CSS汉堡样式 #

删除原来针对伪元素的代码，重新定义汉堡容器和每行的样式，同时调整点击后的动画逻辑（把5行转换成X形）：

/* MENU STYLES 修改部分 */
.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 1rem;
  background: var(--primary-color);
  /* 改为垂直排列子元素 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around; /* 让5行均匀分布 */
}

/* 定义每一行的基础样式 */
.menu-wrap .hamburger > div {
  width: 100%;
  height: 2px;
  background: purple; /* 这里可以根据你的logo配色单独设置每行颜色 */
  transition: all 0.4s ease;
  position: relative;
}

/* 点击后的动画：转换成X形 */
.menu-wrap .toggler:checked + .hamburger > div:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
  background: black;
}
.menu-wrap .toggler:checked + .hamburger > div:nth-child(2) {
  transform: translateY(3px) rotate(-45deg);
  background: black;
}
.menu-wrap .toggler:checked + .hamburger > div:nth-child(3) {
  opacity: 0; /* 隐藏中间行 */
}
.menu-wrap .toggler:checked + .hamburger > div:nth-child(4) {
  transform: translateY(-3px) rotate(45deg);
  background: black;
}
.menu-wrap .toggler:checked + .hamburger > div:nth-child(5) {
  transform: translateY(-11px) rotate(-45deg);
  background: black;
}

/* 保持原有菜单展开的动画逻辑不变 */
.menu-wrap .toggler:checked:hover + .hamburger > div {
  /* 可根据需求调整hover时的旋转角度，让X动画更自然 */
}
/* 以下原有.menu相关样式保持不变 */

自定义配色 #

如果你需要每行匹配logo的不同配色，直接给每个子div单独设置背景色即可：

.menu-wrap .hamburger > div:nth-child(1) { background: red; }
.menu-wrap .hamburger > div:nth-child(2) { background: orange; }
.menu-wrap .hamburger > div:nth-child(3) { background: yellow; }
.menu-wrap .hamburger > div:nth-child(4) { background: green; }
.menu-wrap .hamburger > div:nth-child(5) { background: blue; }

原理说明 #

• 用5个独立的<div>替代伪元素，直接解决行数限制问题
• 通过flex-direction: column和justify-content: space-around让5行均匀分布在汉堡容器内
• 点击复选框时，通过nth-child选择器分别控制每行的位移和旋转，隐藏中间行，最终形成X形动画
• 完全保留了你原有的菜单展开/收起逻辑，不需要改动其他代码

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