响应式菜单生成器

响应式菜单生成器: 用途

每个网站都需要一个在电脑和手机上都能用的菜单。本生成器会用你的链接生成导航菜单：大屏幕上并排显示，低于你选择的断点时显示汉堡按钮。

代码遵循无障碍最佳实践：带标签的 nav 元素、带 aria-expanded 和 aria-controls 的按钮、按 Esc 键或点击链接后关闭，以及尊重减少动态效果偏好的图标动画。预览会同时显示电脑和手机尺寸下的效果。

使用方法

1. 填写网站名称和链接。
2. 选择颜色、断点，以及最后一个链接是否变成按钮。
3. 复制 HTML、CSS 和 JavaScript，或下载示例页面。

使用场景

• 手工制作的企业网站。
• 不使用框架的落地页。
• 替换在手机上不好用的旧菜单。

常见问题

这个菜单支持无障碍吗？

支持。按钮是带 aria-expanded 和 aria-controls 的 button 元素，按 Esc 键或点击链接后菜单会关闭，导航位于带 aria-label 的 nav 元素中。支持键盘和屏幕阅读器。

没有 JavaScript 能用吗？

在电脑上可以：链接始终显示。在手机上按钮需要 JavaScript 才能打开；因此代码只会在脚本加载后（html 上的 js 类）才隐藏链接，没有脚本时链接会堆叠显示。

应该用哪个断点？

最多五个较短的链接时，768 px 效果很好。链接更多或名称较长时，请提高到 960 或 1024 px，避免条目在变成汉堡之前就挤在一起。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具