本文详解如何不依赖 javascript，仅通过 html 语义化结构与 css 的 :checked 伪类、兄弟选择器和过渡动画，构建一个可点击展开/收起的全屏侧边栏汉堡菜单，并兼容移动端优先设计。
本文详解如何不依赖 javascript，仅通过 html 语义化结构与 css 的 :checked 伪类、兄弟选择器和过渡动画，构建一个可点击展开/收起的全屏侧边栏汉堡菜单，并兼容移动端优先设计。
在纯静态网站开发中，实现交互式汉堡菜单常被误认为必须引入 JavaScript。实际上，CSS 提供了一套成熟且可靠的“伪事件驱动”机制——利用 的状态切换配合 :checked 伪类，结合相邻兄弟选择器（+）和通用兄弟选择器（~），即可完全控制菜单的显示/隐藏、图标旋转及动画效果。这种方式零依赖、语义清晰、SEO 友好，且天然支持键盘焦点与屏幕阅读器（通过 label[for] 关联）。
✅ 核心原理：用复选框状态驱动 UI
我们将一个不可见的 作为状态控制器，其后紧跟一个带 for="menu__toggle" 的
<input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <div class="menu__box"> <a class="menu__item" href="mailto:om@example.com">Mail</a> <a class="menu__item" href="./main.html">More to read here.</a> <a class="menu__item" href="contact.html">contact</a> </div>
⚠️ 注意： 必须位于
? 汉堡图标动画（三线变形）
我们使用单个 及其 ::before/::after 伪元素构成三道横线。通过 transform 控制旋转，实现「三线 → ×」的视觉反馈：
立即学习“Java免费学习笔记（深入）”；
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition: transform 0.25s ease;
}
/* 默认状态：三线平行 */
.menu__btn > span::before { content: ""; top: -8px; }
.menu__btn > span::after { content: ""; top: 8px; }
/* 选中状态：上线下旋45°，下线逆旋45°，中线旋转45°形成叉 */
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg); /* 恢复水平 */
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg); /* 旋转成竖线，与中线交叉 */
}? 响应式菜单布局与动画
菜单容器 .menu__box 使用 position: fixed 脱离文档流，初始 left: -100% 完全移出视口左侧。:checked 触发时，平滑滑入：
.menu__box {
position: fixed;
top: 0;
left: -100%; /* 初始隐藏 */
width: 300px;
height: 100%;
background-color: #eceff1;
box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
transition: left 0.25s ease; /* 关键：左边缘动画 */
z-index: 1000;
}
#menu__toggle:checked ~ .menu__box {
left: 0 !important; /* 展开至视口左侧 */
}同时，在桌面端（min-width: 601px）直接隐藏按钮，保留原有底部导航：
@media screen and (min-width: 601px) {
.menu__btn,
.menu__box {
display: none;
}
.villan { display: flex; } /* 恢复底部链接栏 */
}? 注意事项与最佳实践
- 可访问性：务必为
- 层级管理：.menu__box 的 z-index 需高于页面其他固定定位元素（如 header），避免被遮挡。
-
移动端适配：建议在 中添加 viewport meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1">
- 性能提示：所有动画属性均基于 transform 和 opacity（本例中未用 opacity，但推荐替代 left 实现更优性能），避免触发重排（reflow）。
- 邮件链接保护：原文中含 Cloudflare 邮箱混淆代码（__cf_email__），生产环境请确保其正常解密，或改用 mailto: 纯文本（注意爬虫风险）。
✅ 最终效果验证
- ✅ 移动端：底部导航栏自动隐藏，左上角出现汉堡图标；
- ✅ 点击图标：菜单从左侧滑入，覆盖全屏，背景有柔和阴影；
- ✅ 再次点击或点击菜单外区域（需额外处理）：菜单滑出隐藏（注：纯 CSS 无法监听外部点击，若需此行为，建议升级为轻量 JS，或使用 :focus-within 配合可聚焦容器）；
- ✅ 桌面端：汉堡按钮与菜单完全隐藏，底部导航正常显示。
这种 CSS-only 方案简洁、健壮、易于维护，是静态站点与渐进增强场景下的理想选择。掌握其核心思想（状态驱动 + 伪类 + 过渡），你便能举一反三，构建更多无 JS 交互组件。
