CSS 导航栏，别再只靠 display: flex 硬撑了

上周帮朋友改一个企业官网，他指着导航栏说：“就这儿，看着太‘静态’，点不动也没反馈，用户划过去都不知道哪是当前页。”
我扫了一眼代码——全是 float: left 套 inline-block，hover 用 color: #333 切个色，连下划线都是用 border-bottom 手动画的。不是写得不对，是它没“呼吸感”。

真正好用的导航栏，从来不是炫技堆砌，而是在用户视线停留的0.3秒内，悄悄完成三件事：告诉我我在哪、我能去哪、点下去会不会卡。

下面这些写法，是我日常项目里反复验证过的，不讲理论推导，只说“今天就能抄走改着用”的思路。

当前页高亮，别只靠 active 类名硬塞

很多同学给当前页加 .active，然后写 nav a.active { color: #007bff; font-weight: 600; }——这没错，但漏掉了关键一环：语义与样式的耦合太紧。一旦后端模板生成逻辑变（比如用 aria-current="page" 替代 class），样式就断了。

更稳的做法是直接锚定语义属性：

nav a[aria-current="page"] {
  color: #007bff;
  position: relative;
}
nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #007bff;
  border-radius: 2px;
}

这样哪怕 HTML 里没写 .active，只要 aria-current="page" 在，样式就自动生效。可访问性提升的同时，反而让样式更健壮。

横向导航的“弹性收放”，不是靠 JS 才能实现

常听到“响应式导航要加汉堡菜单，得写 JS 监听 resize”。其实纯 CSS 也能扛住中等复杂度的自适应场景。

核心是用 clamp() + minmax() 控制项宽，再配合 overflow-x: auto 做横向滚动（小屏真需要时）：

nav ul {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
nav ul::-webkit-scrollbar { display: none; } /* Chrome/Safari */

nav li {
  flex: 0 0 clamp(80px, 12vw, 140px); /* 最小80px，最大140px，中间按视口比例缩放 */
}

手机上项宽自动压缩，超出部分可左右滑——比强行折叠成汉堡菜单更适合内容型站点（比如文档站、产品功能列表）。用户手指一划就知道还有内容，而不是盯着三个横杠猜“点开是不是又一层弹窗”。

下拉菜单的“悬停防误触”，藏在 :focus-within 和过渡时长里

纯 :hover 下拉，在触摸设备上会失效；全用 JS 又重。折中解法是：鼠标悬停 + 键盘焦点双触发，且加 150ms 过渡延迟防手抖。

.nav-item {
  position: relative;
}
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: 
    opacity 0.15s ease, 
    transform 0.15s ease,
    visibility 0s linear 0.15s;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s; /* 真正展开时不延迟 */
}

重点在 transition-delay: 0s ——悬停瞬间不延迟展开，但离开时先等 150ms 再收起，手滑划过也不会闪退。键盘用户 Tab 进入菜单项，同样触发下拉，无障碍支持顺带解决。

固定定位导航的“滚动感知”，用 scroll-margin-top 比 JS 更轻

页面滚动后导航吸顶，但点击锚点链接跳转，内容常被导航栏盖住。老办法是给每个 h2 加 margin-top: 60px + position: relative; top: -60px，既啰嗦又易漏。

现在一行 CSS 就够：

section[id] {
  scroll-margin-top: 64px; /* 匹配导航栏高度 */
}

浏览器原生识别滚动锚点，并自动预留顶部空间。不用改 HTML 结构，不依赖 JS 计算，连伪元素都不用加。

最后一句实在话

导航栏不是越酷越好，而是越“不被注意”越好。用户记住的不该是那个跳动的下划线，而是“我想找的入口，一眼就在那儿”。
写 CSS 时多问自己一句：这个动效，是帮用户更快定位，还是仅仅让我显得会写 transform？

删掉一个华而不实的 @keyframes，可能比加十个渐变背景更接近好体验的本质。