HTML5 中怎么用 nav 标签承载移动端抽屉菜单内部的跳转链接-H5教程-PHP中文网

标签语义化包裹主导航链接集合，在抽屉菜单中作为内部导航容器，需配 aria-label 提升可访问性，不控制显示逻辑，禁止嵌套非导航内容。

html5 中怎么用 nav 标签承载移动端抽屉菜单内部的跳转链接

标签本身不负责“承载抽屉菜单”，而是语义化地包裹**主导航链接集合**。在移动端抽屉菜单（Drawer）中，它常作为内部导航结构的语义容器，配合 CSS 和 JavaScript 实现展开/收起与跳转功能。

语义正确：用 `nav` 包裹抽屉里的主菜单链接

抽屉菜单打开后显示的是一组用于页面内跳转或路由切换的链接（如首页、关于、联系等），这正符合

的语义定义——“页面主要导航区块”。不要用

 替代，避免语义丢失。示例结构：



  

    首页

    关于

    联系

  

可访问性增强：必须添加 aria-label 或 aria-labelledby

抽屉菜单通常默认隐藏（display: none 或 visibility: hidden），屏幕阅读器可能跳过无名称的 
。显式标注导航用途，确保残障用户清楚其功能。

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										

推荐用 aria-label="主菜单"（简洁明确）
  若抽屉有可见标题（如 菜单），可用 aria-labelledby="drawer-title"


样式与交互：nav 本身不控制显示，靠父容器和 JS 控制
 是纯语义标签，不自带样式或行为。抽屉的展开/收起需由外部控制：

用 CSS（如 .drawer.open nav { transform: translateX(0); }）实现滑入动画
  用 JavaScript 切换 .drawer 的 open 类，触发过渡效果
  链接跳转保持原生行为（href）；单页应用（SPA）中可配合框架路由（如 Vue Router 的 ）

注意嵌套边界：不要在 nav 里塞非导航内容
 应只包含导航相关元素。常见错误包括：
误把登录按钮、搜索框、语言切换器直接塞进  —— 它们不属于“主要导航”，应移出或用 / 等更合适标签
  
嵌套另一个 （如子菜单）—— 可以，但需确保有独立语义（如 aria-label="产品子菜单"）

  用  包裹页脚链接或面包屑 —— 应分别用  和