hanav 助你开发动画流畅、高可访问、键盘可控的导航栏

hanav 是我这几个月开发的 React 导航栏组件库，用它可以开发出用户体验优秀的导航栏。

动画、高可访问和键盘导航是 hanav 的亮点，下面是演示动图。

🍯 动画

hanav 的动画可以很好地表达“内容展现的由来、切换的过程和消失的去向”。

一个网页提供了一个导航栏，当鼠标悬浮在触发器按钮上、切换菜单、移出按钮，出现了丝滑的动画：菜单面板从导航栏内部平滑滑出，切换到另一个菜单时，面板的高度顺滑地变高或变低，并且菜单的内容像履带一样左移或者右移。选择了导航栏的自定义 y 轴动画选项、面板跟随选项、动态宽度选项后，出现了和之前不一样的动画：菜单面板以渐隐的方式出现，切换菜单时，面板会进行顺滑地位移，面板始终以菜单对应的触发器按钮为中心运动，并且面板的宽度是以动画形式变化的

结合可访问性，hanav 提供了无动画的独立组件，用于当用户打开操作系统的“减弱动态效果”时，启用无动画版本导航栏。

♿️ 高可访问

hanav 可以通过屏幕阅读器（辅助技术）访问，hanav 添加了一些有助于辅助技术访问的 aria 属性。

在一个网站中打开苹果“旁白”，通过 Tab 聚焦导航栏中的元素，当聚焦到触发器按钮 hanav 时，旁白读出“hanav ，已收起，按钮”，通过 Escape ，焦点从菜单面板回到触发器按钮 hanav ，旁白读出“hanav ，已收起，按钮，Main ，导航”

除了辅助技术导航，hanav 也提供专为移动端设计的独立组件，用于开发响应式设计页面。hanav 内部使用语义标签和原生控件，利于 SEO 和辅助技术导航。其它的，hanav 完全支持键盘导航。

🎹 键盘控制

hanav 支持自由切换鼠标、键盘访问，通过键盘 Tab、Shift-Tab、Escape、空格、回车，即可访问。

在一个网页中使用 Tab 和 Shift-Tab 导航，当聚焦导航栏触发器按钮时按下回车，焦点从按钮跳跃至菜单面板第一个元素，继续 Tab ，按钮到达面板里最后一个可聚焦元素，接着 Tab ，按钮又回到了第一个可聚焦元素，按下 Escape ，焦点从面板回到了触发器按钮。在面板展开时，通过鼠标点击面板，接着按下 Tab 或 Shift-Tab ，焦点会聚焦面板第一个可聚焦元素或最后一个可聚焦元素

如果喜欢，尝试体验一下～然后标个 Star 支持和推广一下吧～

🌷🪻🌹🌻🌷