如何为基础CSS粘性导航栏实现纯CSS汉堡菜单？

问题分析 #

你之前设置flex-direction: column没生效，核心原因是.navbar固定了height: 50px且overflow: hidden，切换列布局后导航内容超出固定高度被隐藏，同时默认的flex布局对齐方式也需要调整。

解决方案步骤 #

1. 调整HTML结构：添加隐藏的checkbox（用于状态控制）和汉堡图标（视觉触发按钮），利用CSS兄弟选择器关联菜单显示逻辑。
2. 修改CSS适配响应式：在媒体查询中覆盖导航栏的固定高度、flex方向，通过checkbox状态控制菜单的显示/隐藏，同时美化汉堡图标样式。

完整代码 #

HTML

<header>
  <nav class="navbar">
    <!-- 隐藏的checkbox，用于控制菜单显示 -->
    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <!-- 汉堡图标 -->
    <label for="menu-toggle" class="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </label>
    
    <h2>Site name</h2>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <!-- 主内容，用于测试滚动时导航固定效果 -->
</main>

CSS

* {box-sizing: border-box;}

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  padding-top: 50px; /* 给固定导航栏预留顶部空间 */
}

.navbar {
  background-color: rgba(50, 150, 220, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  color: white;
  padding: 0 25px;
}

.nav-links {
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links li {
  list-style-type: none;
}

.nav-links li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 1rem;
}

.nav-links li a:hover {
  background-color: rgb(200, 200, 200);
}

/* 汉堡菜单基础样式 */
.menu-toggle {
  display: none; /* 隐藏原生checkbox */
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.3s;
}

main {height: 1500px;}

/* 小屏幕适配媒体查询 */
@media (max-width: 768px) {
  .navbar {
    height: auto; /* 去掉固定高度，让导航自适应内容 */
    flex-direction: column;
    align-items: flex-start; /* 内容左对齐 */
    padding: 10px 25px;
  }

  .hamburger {
    display: flex; /* 显示汉堡图标 */
    position: absolute;
    top: 15px;
    right: 25px;
  }

  .nav-links {
    display: none; /* 默认隐藏菜单 */
    width: 100%;
    flex-direction: column;
    margin-top: 10px;
  }

  /* checkbox选中时显示菜单 */
  .menu-toggle:checked ~ .nav-links {
    display: flex;
  }

  /* 汉堡图标点击后的动画效果（可选） */
  .menu-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .menu-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }
}

关键说明 #

• 移除了.navbar的overflow: hidden，并在媒体查询中将height改为auto，确保列布局后内容正常显示
• 用隐藏的checkbox作为状态开关，通过:checked伪类实现菜单的显示/隐藏逻辑
• 汉堡图标通过三个span实现，点击后可触发CSS变换呈现“叉号”动画（可选效果）
• 小屏幕下导航链接自动转为列布局，占满导航栏宽度

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