这是一款移动端菜单交互合集效果,基于原生 HTML+CSS+JavaScript 实现,把手机上常见的 12 种导航形态集中做成了可以真实操作的样例:汉堡抽屉、侧边导航条、底部标签栏、悬浮球速拨、底部弹出面板、溢出菜单、宫格菜单、分段控件、手风琴列表、长按上下文菜单、全屏遮罩菜单和单手"舵式"工具栏。
动效走的是 CSS 过渡加缓动曲线,配合遮罩层与位移变换;交互逻辑用 JS 切换类名来驱动,长按菜单用计时器判定按压时长,顶部导航则用 IntersectionObserver 做滚动高亮。
适用于移动端 H5、小程序与 App 的导航方案选型、前端交互练习、UI 设计参考等场景。