导航是整个网站上唯一每一页都出现的组件，改一次，全站受影响。所以挑导航效果和挑一个卡片动效不是一回事：卡片做砸了只是那一屏难看，导航做砸了是全站都不好用。判断标准也不该是好不好看，而是访客知不知道自己现在在哪、能不能一步到想去的地方。
下面 11 款是童哲网上架的导航与菜单类效果，按用在什么位置分三组：移动端导航、桌面端顶部与吸顶导航、风格化与入口型导航。其中有两款用了非常新的 CSS 特性，浏览器支持情况我单独查了一遍，写在对应条目里——那部分请一定看完再决定要不要上生产。
第一组 · 移动端导航（01 - 03）—— 拇指能不能够到，比好不好看重要
01. 12 种移动端菜单形态合集 —— 选型阶段先看这个
HTML + CSS + JS 12 种形态 可交互演示
把手机上常见的 12 种导航形态做成了能真实操作的样例：汉堡抽屉、侧边导航条、底部标签栏、悬浮球速拨、底部弹出面板、溢出菜单、宫格菜单、分段控件、手风琴列表、长按上下文菜单、全屏遮罩菜单，还有一个单手操作的「舵式」工具栏。动效是 CSS 过渡加缓动曲线配遮罩层位移，逻辑靠 JS 切类名驱动，长按菜单用计时器判断按压时长，顶部导航的滚动高亮用的是 IntersectionObserver。
这一款的价值不在于「拿哪个去用」，而在于它把选择题摆在了同一个页面上。移动端导航形态的取舍是有讲究的：入口在 5 个以内、且都是高频，用底部标签栏；入口多但访问频次低，用汉堡抽屉；入口是并列的分类而不是功能，用宫格；一个页面内的分段切换，用分段控件。这些道理写成文字很抽象，摆成 12 个能点的样例，十分钟就能定下方案。做移动端页面之前先过一遍，比事后返工划算。
要说的问题有两个。一是数据库里这条的框架字段标着「GSAP + Canvas」，但描述里写得很明确是原生 HTML+CSS+JavaScript，两处对不上，买之前建议先在演示页看一眼实际加载了什么。二是合集类素材天然的代价：12 种形态各自的完成度是演示级的，直接搬进项目通常还要补细节，尤其是无障碍相关的那部分（后面 FAQ 会讲）。
02. 底部导航栏气泡指示器 —— 五行 JS 撑起来的效果
CSS + JS 底部标签栏 主色可配
点击任一图标，白色圆形指示器沿导航条滑到该位置，两侧用圆角阴影拼出向内凹陷的弧形过渡，像水滴嵌进条形，衔接处没有断痕；选中的图标同时上浮进圆球中央，换成对应主题色，下方晕开一层柔和光晕。每个菜单项的高亮色是单独的变量，图标库随便换，导航项数量和宽度按等分算，增减条目改几处数值就行。
值得说一句的是它的脚本只有五行，其余全靠 CSS 过渡驱动。这类效果的常见做法是用 JS 去算位置、写内联样式、监听一堆事件，结果就是代码难改、性能也一般。这款反过来，JS 只负责切换一个状态，剩下交给 CSS 自己过渡——这是更耐用的写法，改配色改数量都不用碰逻辑。
拿去做 App 风格的 H5 或移动端页面时，有一个坑要提前处理：iPhone 的全面屏底部有一条 Home Indicator，固定在底部的导航条会被它压住一截。解决办法是给容器加上 env(safe-area-inset-bottom) 的内边距，这属于移动端固定底栏的标准动作，这款效果本身没有包含，需要自己补。
03. 环形展开菜单 —— 悬浮操作按钮的进阶版
CSS + JS 悬浮菜单 半径可调
点中央的加号，按钮旋转成叉号并向外扩散出一圈白色底面，八个图标沿圆周放射状依次展开；选中某一项时，一枚亮绿色圆形指示器沿圆弧滑到对应位置，选中的图标同时向圆心内收，指向关系一看就懂。图标间距按等分角度自动排布，增减菜单项只改数量，图标、主色、半径都能自定义，脚本十来行，动效靠纯 CSS 过渡。
它和上一款是同一个作者路数的两个方向：都是变量驱动、脚本极简、动效交给 CSS。区别在于场景——底部标签栏是常驻的主导航，环形菜单是按需唤起的快捷操作。后者更适合后台系统的快捷入口、作品集页面的创意导航，或者一个页面里的「更多操作」。
圆周排布的天然限制是项数不能多。八个已经接近上限，再加角度间距就会挤到图标互相碰上；而且圆周上的位置和菜单语义没有对应关系，用户记不住「第三项在右下角」，每次都得重新看一遍。所以它适合承载并列且不常用的操作，不适合放主导航。深色底配荧光绿的配色也偏创意向，做企业站要重新调。
第二组 · 桌面端顶部与吸顶导航（04 - 07）—— 长页面的定位问题
04. 苹果风液态玻璃导航栏 —— 通用性最好的一款
CSS + JS 明暗双主题 玻璃拟态
玻璃质感的顶部导航栏，明暗两套主题都做了，菜单项切换有顺滑的位移动效，悬停时有一层细腻的微光反馈。这一款在本文里是最没有性格、因此也最好用的：它不挑内容、不挑行业，品牌官网、创意页面、后台系统、H5 都能放，换个主色就变成你的。
玻璃拟态（背景模糊）这几年被苹果带火之后到处都是，但它有个必须注意的前提：模糊层背后如果是浅色且低对比的内容，导航文字会糊成一片。这类效果的演示页背景通常是精心挑过的大图，换成你自己的白底页面，观感会掉一大截。真要用，导航栏底色的不透明度得调高一些，或者加一层半透明的深色/浅色底，别只靠模糊撑对比度。
另外背景模糊在低端安卓机和部分旧设备上是有渲染成本的，滚动时可能掉帧。移动端建议直接退化成不透明纯色导航条——视觉上损失不大，流畅度差别明显。
05. 仿 macOS Dock 动态导航栏 —— 桌面端工具类站点的路子
GSAP Dock 风 面板切换
模拟 macOS 程序坞的交互，面板切换过渡流畅，按钮状态自适应变化，整体走简约高级路线。适合桌面端管理后台、工具类网站、产品展示页——共同点是访客都在电脑前、都用鼠标，Dock 那套「靠近就放大」的反馈才成立。
它用了 GSAP。顺带说一件对选型有实际影响的事：GSAP 的全部插件从 2025 年 4 月起已经免费，商用也不例外——Webflow 在 2024 年 10 月收购 GreenSock 后，把过去只对 Club 会员开放的那部分一并开放了。所以「用了 GSAP 会不会有授权成本」这个顾虑现在不成立了。不过条款是会变的，真要上商业项目，按惯例自己去 GSAP 官方许可页面复核一眼当前版本。
真正要掂量的是另一件事：Dock 风的放大反馈依赖鼠标位置，触屏上没有 hover，这套交互在手机端等于不存在。 所以它只能作桌面端方案，移动端得另做一套导航——这不是缺陷，是它的定位决定的，但预算和工时要按两套算。
06. CSS 滚动感知吸顶导航 + 锚点指示器 —— 先看浏览器支持
纯 CSS 吸顶导航 实验特性
导航栏吸顶后能自动感知自己「已经吸住了」这个状态并切换样式，当前章节的导航项高亮跟随滚动，锚点定位平滑精准——整套不写一行滚动监听。用到的是 container-type: scroll-state 配合 CSS 锚点定位和 :target-current。放在过去，「导航吸顶后变个样子」必须靠 JS 监听 scroll 事件加节流，代码脏、性能也不好；现在这件事 CSS 自己就能做，思路上是一次真正的转变。
但是——这两个特性目前都还不能直接上生产，请务必先看清楚：
container-type: scroll-state（滚动状态容器查询）目前只有 Chrome 和 Edge 133 及以上支持，Firefox 和 Safari 都不支持，caniuse 上的覆盖率约七成。CSS 锚点定位的情况好一些但也谈不上稳妥：Chrome / Edge 125+、Firefox 147+、Safari 26.0+，caniuse 全球覆盖约 84%，Safari 18.7 及以前一概不支持。
换句话说，一个 iPhone 用户如果没升到最新的 Safari，看到的会是一个不会高亮、可能也不会吸顶的普通导航。所以这一款的正确用法是：当成前沿特性的学习材料，或者用 @supports 包起来做渐进增强——不支持的浏览器落到一个普通的静态导航，支持的浏览器多拿到吸顶和高亮。千万别把它当成「省掉 JS 的现成方案」直接换上去。
07. 纯 CSS 滚动联动图库导航 —— 和上一款是同一路，同样的限制
纯 CSS 侧栏缩略图 实验特性
左侧一列缩略图，随页面滚动实时感知「前一张、当前、后一张」并自动切换高亮：当前项金色边框，前后项灰显；右侧大图的标题在进入视野时有细腻的入场动画。同样一行 JS 都没有，靠的是 :target-current 这类伪类、CSS 锚点定位和 animation-timeline 滚动时间线。
和第 06 款放在一起看会更清楚：它们是同一波 CSS 新能力的两个应用面——一个解决「导航跟着滚动变样式」，一个解决「侧栏跟着滚动换高亮」。以前这两件事都是 JS 的活，现在都能交回 CSS。这是值得关注的方向。
限制也完全一样，浏览器支持是硬门槛，上一款列的那两条数据同样适用于这一款。另外 animation-timeline（滚动驱动动画）本身也还没在所有浏览器铺开。给摄影作品集、产品图册、新闻专题这类长页面用之前，先想清楚不支持的浏览器上会退化成什么样子——最好的情况是退成一个能用的静态缩略图列表，最坏的情况是缩略图完全失去指示作用。这一步得自己测。
第三组 · 风格化与入口型导航（08 - 11）—— 用性格换记忆点
08. GSAP 赛博朋克故障风导航菜单 —— 文字还是文字
GSAP + SVG 故障风 悬停触发
高频随机的文本撕裂、横向位移错位、色彩重叠，还原早期电子屏幕的信号抖动，悬停时菜单项爆发出很有张力的撕裂反馈，CRT 显示器那种硬核机械质感和现代交互的顺滑度都在。
它真正的技术取舍值得单独讲：故障风的传统做法是贴视频素材或者上 Canvas 做像素级渲染，前者体积大、后者性能贵，而且两种做法都会让菜单文字变成图像——文字不能选中、不能被搜索引擎读到、屏幕阅读器也念不出来。这一款用 GSAP 把「无序的信号错误」拆成可精准控制的时间轴动画，动的是真实的 DOM 文本节点，所以文字始终还是文字。对既想要视觉差异化、又不想牺牲可访问性和 SEO 的项目，这个思路是对的。
代价是它的风格几乎没有中间地带：赛博朋克游戏官网、潮流品牌、独立作品集、数字艺术 H5 这类场合是加分项，放到企业站或者需要传递可信感的地方就是灾难。另外高频闪动对光敏感人群不友好，如果站点面向大众，最好尊重系统的「减弱动态效果」偏好，在开启时把动效降到最低。
09. 纯 CSS 悬停跑马灯菜单 —— 藏起来的那一层
纯 CSS 悬停展开 无缝滚动
默认状态是一个极简的文字列表，鼠标悬停时菜单项平滑展开，露出一条带图文混排的无缝滚动跑马灯。整套只用 @keyframes 和 :hover，没有 JS。
这个设计的聪明之处在于分了两层信息：不悬停的时候，页面是干净的，导航不抢视觉；悬停之后，才给出这一栏对应的图像预览。对创意设计官网、旅游城市专题、品牌落地页这类栏目名称本身说不清内容的站点很有用——「城市漫游」四个字看不出什么，配上图就懂了。做作品集导航也是同理。
它的问题和第 05 款是同一个：整个交互建立在 hover 之上，触屏没有 hover。手机上要么第一次点展开、第二次点跳转（会让人误以为链接坏了），要么干脆退化成纯文字列表——后者更可取，但那样移动端就完全享受不到这个设计。所以它适合桌面流量为主的站点，移动端占比高的话，这个投入换不来什么。
10. CSS 图标网格导航 —— 分类入口，不是导航栏
纯 CSS 4×2 网格 入场动画
深色背景上 8 个圆角卡片排成 4×2，每张卡片一个线性图标加一行文字标签。页面初始化时图标挨个从小变大膨胀入场；悬停或点击某张卡片，它触发渐变高亮（多种配色）并伴随轻微的伸缩和阴影，其余卡片保持暗色半透明，层次对比明确。纯 CSS 实现。
它和前面几款不是一类东西——这是「分类入口区」，不是导航栏。位置通常在首页首屏下方或者一个分类页的顶部，用来把访客分流到几个并列的板块去。电商的商品分类、服务类站点的业务板块、工具站的功能入口都是它的场子。相比一行文字链接，图标加动效确实更容易被看见，也降低了「这几个词是什么意思」的理解成本。
要注意两点。一是八个格子是设计好的节奏，硬塞到十二个，4×3 的网格在手机上会拖得很长，入场动画逐个播完也变慢，届时得改成两列或者干掉动画。二是这类区块很容易被做成「装饰性目录」——图标好看但标签词写得太抽象（「赋能」「生态」「解决方案」），点进去发现是空页面。标签词写具体，比动效做得炫重要得多。
11. 拟物化太空飞船导航控制面板 —— 严格说它不是导航
CSS + JS 拟物化 可拖动控件
拉丝金属质感、铆钉舷窗、模拟速度表、带 CRT 扫描线的 LCD 屏、弹簧式拨动开关，全部用 HTML+CSS+JS 做出来；推力滑块能拖，拖动时背景星空跟着加速，曲速跳跃按钮点下去有特效。
标题里的「导航」是飞船导航（navigation 的航行义），不是网页导航栏。 我还是把它留在了这篇里，因为它对做导航的人有另一层用处——它是一份高质量的「控件质感」参考。拟物化最难的不是画得像，是把按下、拨动、拖拽这些状态的光影和位移做对；这一款把开关、旋钮、滑块、指示灯的各种状态都实现了一遍，做游戏界面原型、科幻主题站、创意个人主页，或者只是想学怎么用纯 CSS 堆出金属和玻璃质感，都能直接拆开看。
当然它不是拿来当导航栏用的。真要用在项目里，得接受两件事：拟物化的视觉是高度定制的，换个配色就得重画一遍光影，改动成本远高于扁平设计；以及这套面板的信息密度和识别效率都不如常规 UI，只适合把「操作感」本身当成内容的场合。
常见问题
Q：导航栏一直吸在顶部，会不会太占地方？
A：看页面长度。短页面不需要吸顶——用户滚两下就到底了，吸顶只是白白吃掉一条屏幕高度，移动端尤其明显（手机可视高度本来就紧张，一条 60px 的固定导航就是 10% 左右的内容区）。长页面、文档页、单页官网这类需要频繁在章节间跳的，吸顶才划算。折中做法是向下滚动时收起、向上滚动时露出，这样想找导航的人一个反向手势就能召回来，其余时间屏幕全给内容。另外吸顶导航在移动端建议把高度压到 48–56px，别照搬桌面端的尺寸。
Q：点了锚点跳过去，标题被吸顶的导航栏挡住了怎么办？
A：这是吸顶导航最常见的一个 bug，几乎每个自己写吸顶的人都会踩一次。原因是浏览器把目标元素滚到了视口最顶端，而那个位置正被固定导航盖着。正确的解法是给锚点目标元素加 scroll-margin-top，值设成导航栏高度再多留一点呼吸空间，浏览器就会自动少滚这么多。不要用「给标题加一个透明占位元素」这类老办法，会污染文档结构。本文第 06 款那种 CSS 原生方案里也一样要处理这个。
Q：这些花哨的导航效果，会影响 SEO 吗？
A：动效本身不影响，但有一件事影响很大：导航链接必须是带 href 的真 <a> 标签。 有些效果为了方便，把导航项写成 <div> 再用 JS 监听点击去跳转，视觉上一模一样，但爬虫顺着页面爬的时候看不到这条链接，你的内页就少了一条来自全站每一页的内部链接——这对收录和权重传递的损失是实打实的。拿到任何一个导航效果，第一件事就是打开代码看菜单项是不是 <a href>；如果不是，改回来，动效逻辑通常不受影响。同理，汉堡菜单里的链接不要等点开才用 JS 插进 DOM，直接写在 HTML 里、用 CSS 控制显隐更稳妥。
Q：汉堡菜单在桌面端能用吗？
A：能用，但通常不划算。汉堡菜单的本质是用一次额外点击换屏幕空间——手机上屏幕真的不够，这笔交易合算；桌面端横向空间充足，把栏目直接摊开显示，访客扫一眼就知道这站有什么，藏起来只会降低内页的被发现率。例外是两种情况：一是栏目实在太多（比如后台系统的几十个功能），摊不开；二是内容型站点刻意要极简的沉浸感，比如摄影作品集。除此之外，桌面端还是老老实实把主要栏目露出来。
Q：这些导航效果，键盘用户能操作吗？
A：这是本文这类素材的共同短板，得说清楚。绝大多数演示级的导航效果只处理了鼠标和触摸，键盘操作要自己补，主要是三件事：菜单项必须能用 Tab 键依次聚焦，并且聚焦时有明显的可见轮廓（很多效果为了美观把 outline 直接去掉了，这是错的，要去也得换成自己的聚焦样式）；汉堡菜单和展开式菜单的触发按钮要加 aria-expanded 状态，展开后焦点应该进入菜单内部，按 Esc 能关闭并把焦点还回按钮；纯 :hover 驱动的效果（本文第 05、09 款）要额外补上 :focus-visible，否则键盘用户永远看不到那一层。这些工作量不大，但没人替你做——买回来的是视觉和动效，不是完整的无障碍实现。
