HTML中实现响应式导航菜单的汉堡按钮结构与交互方案-html教程-PHP中文网

汉堡按钮必须用语义化实现，设type="button"防提交，配合实时切换的aria-expanded与严格匹配id的aria-controls，禁用或模拟。

html中实现响应式导航菜单的汉堡按钮结构与交互方案

汉堡按钮的 HTML 结构必须包含语义化触发器与可访问性标记

纯 <div> 堆叠的“三横线”按钮无法被屏幕阅读器识别，也缺乏键盘焦点支持。正确结构需用 <code><button></button> 作为触发器，并通过 aria-expanded 和 aria-controls 显式关联菜单容器。

常见错误是把 aria-expanded 写死为 "true" 或漏掉 id 匹配：

<button aria-expanded="false" aria-controls="nav-menu">☰</button>
<nav id="nav-menu"><ul>...</ul></nav>

aria-expanded 必须随菜单开闭实时切换为 "true" 或 "false"
aria-controls 的值必须严格等于目标 nav 的 id，大小写和连字符都不能错
避免用 <a href="#"></a> 模拟按钮——会触发页面跳转、破坏键盘导航流

CSS 实现折叠/展开动画时不能只依赖 display: none

display: none 会让元素完全脱离渲染流，导致 transition 无效；而单纯用 opacity 又无法阻止键盘焦点进入隐藏菜单。折中方案是组合使用 visibility、height 和 overflow。

关键点在于：菜单容器需有明确高度（哪怕初始为 0），且 overflow: hidden 配合 transition 才能实现平滑收放：

nav[aria-expanded="false"] {
  height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: height 0.3s ease, visibility 0.3s;
}
nav[aria-expanded="true"] {
  height: auto;
  visibility: visible;
}

不要对 height: auto 做 transition——浏览器无法计算起止值，动画会失效
若菜单项高度不固定，改用 max-height（设一个足够大的值如 500px）配合 overflow: hidden
务必加 visibility 控制可访问性：仅靠 opacity: 0 仍允许键盘聚焦

JavaScript 切换逻辑必须处理点击外区域关闭与 ESC 键响应

用户点击菜单外部或按 ESC 键时，若菜单仍保持展开，体验就断了。这需要监听 document 级事件，而非仅绑定按钮。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

核心逻辑要区分事件来源，避免重复触发：

const btn = document.querySelector('[aria-controls]');
const menu = document.getElementById(btn.getAttribute('aria-controls'));

btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  menu.setAttribute('aria-expanded', !expanded);
});

document.addEventListener('click', (e) => {
  if (!btn.contains(e.target) && !menu.contains(e.target)) {
    btn.setAttribute('aria-expanded', 'false');
    menu.setAttribute('aria-expanded', 'false');
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') {
    btn.setAttribute('aria-expanded', 'false');
    menu.setAttribute('aria-expanded', 'false');
  }
});

判断点击是否在菜单外时，必须用 contains() 而非 e.target !== btn && e.target !== menu——子元素点击会被误判
Escape 监听需全局注册，且仅在菜单展开时生效，避免干扰其他输入框
不要用 toggleAttribute() 替代显式设置——IE 不支持，且无法保证字符串值为小写 "true"/"false"