如何制作响应式导航菜单_结合CSS媒体查询与Checkbox技巧-css教程-PHP中文网

纯 CSS 实现响应式导航菜单可行，关键用@media断点控制布局+checkbox:checked模拟开关状态，规避JS失效风险；HTML中input需置于label和nav-list之前以支持~选择器，max-height过渡需精准设值，768px为稳妥断点。

如何制作响应式导航菜单_结合css媒体查询与checkbox技巧

纯 CSS 实现响应式导航菜单是可行的，关键在于用 @media 控制断点 + 模拟开关状态，完全规避 JS 加载失败或执行阻塞导致菜单不可用的问题。

为什么不用 JavaScript 控制显示/隐藏

很多初学者直接用 display: none + JS 切换 class，结果在弱网、JS 报错或禁用 JS 的环境下，移动端菜单永远收不起来或打不开。而是原生表单控件，状态切换可靠，且能被 :checked 伪类精准捕获，CSS 过渡（如 max-height）也能正常触发。

避免依赖 JS 执行时机：checkbox 点击即生效，不卡在 DOM ready 或事件绑定之后
兼容性更好：IE9+ 均支持 :checked 和相邻兄弟选择器 ~
可访问性更优：屏幕阅读器能识别 checkbox 状态，配合 aria-expanded 更规范

移动端汉堡菜单的 HTML 结构怎么写

结构必须保证在和

之前，才能用 ~ 选择器控制后续元素。不要把 checkbox 放在 ul 里面或后面。

<nav class="nav"><input type="checkbox" id="nav-toggle"><label for="nav-toggle" class="hamburger">☰</label>
  <ul class="nav-list">
<li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/about">关于</a></li>
  </ul></nav>

for="nav-toggle" 必须与 id 完全一致，否则点击 label 不会触发 checkbox
label 内容可以是 Unicode 字符（如 ☰），也可以是 SVG 图标，但需确保点击区域 ≥ 44px
ul 默认设 max-height: 0; overflow: hidden;，:checked ~ .nav-list 设为 max-height: 300px（值要略大于所有 li 总高，否则动画截断）

@media 断点设多少才合理

别迷信 480px 或 320px。现代设备中，iPhone 13/14 横屏是 568px，iPad mini 是 744px，折叠屏展开后常超 800px。768px 是最稳妥的断点，它覆盖绝大多数平板竖屏和小尺寸桌面屏，同时留出足够空间让菜单垂直排列不拥挤。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

桌面端规则写在 @media (min-width: 769px)，避免与移动端样式冲突
移动端默认样式（无媒体查询包裹）就是小屏逻辑，这样即使媒体查询失效，基础功能仍可用
如果项目需适配横屏手机，可加第二断点：@media (min-width: 576px) and (max-width: 768px) 微调 padding 或 font-size