每个网页项目都要写导航栏。响应式（桌面横排、手机汉堡菜单）、下拉菜单、活跃状态高亮——这些代码每次都要重写，挺浪费时间的。
速工具 的导航栏生成器支持自定义菜单项、颜色、响应式断点、汉堡菜单样式，生成可直接粘贴的 HTML/CSS/JS 代码。
一个完整导航栏需要什么
| 元素 | 实现方式 | 坑点 |
|---|---|---|
| 菜单列表 | 《ul》《li》《a》 | 记得加《nav》语义标签 |
| 响应式 | CSS @media 断点 | 断点选 768px 还是 1024px？ |
| 汉堡菜单 | JS 切换 .active 类 | 记得加 aria-expanded 无障碍属性 |
| 下拉菜单 | CSS :hover + JS 触摸支持 | 手机上没有 hover，要 click 触发 |
| 活跃状态 | JS 判断当前路径高亮 | 要处理子路径（/article/xx 也要高亮 /article） |
响应式断点选多少
现在手机屏幕越来越大（Samsung Ultra 系列横过来有 360+px），断点选 768px（平板竖屏）是比较通用的做法：
- > 768px：桌面端，横排菜单
- ≤ 768px：移动端，汉堡菜单 + 垂直展开
如果项目要支持平板横屏（比如后台管理系统），可以把断点设到 1024px。
无障碍（Accessibility）要点
导航栏是最核心的无障碍元素之一：
- 用《nav》标签包裹，屏幕阅读器能识别「这是导航区」
- 汉堡按钮加
aria-label="菜单"和aria-expanded - 菜单展开后，用
tab键能依次聚焦到每个菜单项 - 活跃项加
aria-current="page"
使用步骤
- 打开 导航栏生成器。
- 添加菜单项（文字 + 链接），可拖拽排序。
- 设置颜色（背景、文字、悬停色）、断点、汉堡菜单样式。
- 勾选需要的功能（下拉菜单、活跃高亮、无障碍属性）。
- 预览效果，复制 HTML/CSS/JS 代码，粘贴到项目里。
FAQ
生成的代码有依赖吗（jQuery、框架）？
没有。生成的是纯 HTML/CSS/原生 JS，不依赖任何框架或库。直接粘贴就能用。如果你用 React/Vue，可以把生成的 HTML 结构作为参考，改写成组件形式。
下拉菜单在手机上怎么处理？
手机上不要用 :hover（没有鼠标），要改成 click 触发。生成器里勾选「移动端下拉点击展开」，生成的 JS 会自动判断屏幕宽度，决定用 hover 还是 click。