使用HTML编辑器创建自适应头部导航的实例-html教程-PHP中文网

用 flexbox 实现响应式导航栏：对 nav ul 设 display: flex，用 @media 控制断点（推荐 768px/992px），js 仅切换类名，必加 aria-expanded、aria-controls 和 role 属性，移动端需 touch-action: manipulation 及焦点样式。

使用html编辑器创建自适应头部导航的实例

用 `flexbox` 实现响应式导航栏，别碰 `float` 或 `inline-block`

现代自适应头部导航的核心是 display: flex，不是老式布局 hack。它天然支持等宽分配、自动换行、对齐控制，且在所有主流浏览器（包括 Safari 10+）中稳定可用。

常见错误是给 nav 套一层 div 再加 float，结果在小屏下菜单堆叠错位、点击区域变小、justify-content 失效。直接对 ul 应用 flex 更干净。

把 nav ul 设为 display: flex，子项 li 默认横向排列
用 flex-wrap: wrap 允许小屏时换行（但更推荐用 @media 隐藏菜单 + 切换汉堡按钮）
避免给 a 设固定 width，改用 flex: 1 或 min-width 防止文字撑破容器
移动端必须加 viewport meta：<meta name="viewport" content="width=device-width, initial-scale=1">

用 `@media` 控制导航折叠，不是靠 JS 检测屏幕宽度

响应式导航的断点逻辑应由 CSS 主导，JS 只负责切换类名。否则会遇到：页面加载闪动、SSR 不兼容、手势操作延迟、屏幕旋转后状态不同步等问题。

典型断点设在 768px（平板竖屏）或 992px（桌面窄屏），取决于你的设计稿。不要用 max-width: 480px 这种过时阈值——现在 iPhone SE3 和安卓中端机都是 390px 宽，但 DPR 高，CSS 像素仍是 390。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

默认状态（大屏）：nav ul 显示，.menu-toggle 隐藏
小屏媒体查询内：隐藏 nav ul，显示 .menu-toggle 按钮，同时让 nav ul 的 position 脱离文档流（如 position: absolute）防止占位空白
JS 只需监听按钮 click，切换 nav ul 的 show 类，CSS 控制 transform: translateY() 或 max-height 动画

`aria-expanded` 和 `aria-controls` 不是可选项，是必填属性

没有语义化 ARIA 标签的汉堡菜单，在 VoiceOver、TalkBack 或键盘 Tab 导航中会完全不可操作。用户按 Tab 进入按钮后，无法知道它控制什么，也无法得知当前展开/收起状态。

错误写法：<button class="menu-toggle">☰</button><ul class="nav-menu">...</ul> —— 缺失关联与状态。

按钮必须有 aria-expanded="false"（初始状态），点击后同步更新该值
按钮必须有 aria-controls="nav-menu-id"，对应 ul 的 id
ul 应加 role="navigation"，若含子菜单，每个下拉项需加 role="menu" 和 aria-haspopup="true"
别依赖 hidden 属性隐藏菜单——它会直接从可访问树中移除节点；用 visibility: hidden + height: 0 + overflow: hidden 更稳妥

移动端点击穿透和 `:focus-visible` 的实际处理

iOS Safari 在快速双击或滚动后触发导航按钮，常导致“点一下打开，再点一下没反应”，本质是点击事件被系统吞掉或焦点未正确归位。这不是 bug，是 WebKit 对 click 的节流策略。

另一个坑是键盘用户按 Tab 进入菜单按钮后，只看到一个模糊边框，不知道是否已聚焦。Chrome/Firefox 已支持 :focus-visible，但 Safari 目前仍需 polyfill 或降级方案。

给 .menu-toggle 加 touch-action: manipulation，减少 iOS 300ms 延迟并提升点击可靠性
避免用 onclick 内联 JS，统一用 addEventListener('click', ...) 并调用 event.preventDefault()
为键盘用户提供清晰焦点样式：.menu-toggle:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }
Safari 不支持 :focus-visible，可用 @supports not (selector(:focus-visible)) 回退到 :focus，但需注意鼠标点击也会触发，所以建议配合 data-focus-visible-added 类做 JS 辅助判断