门户网站导航需按语义分组并控制一级栏目≤7个，超量须分层；Grid布局须用带业务前缀的grid-area命名、prefers-reduced-motion兜底动画、键盘焦点同步展开菜单，且每个导航格子须有明确用户目标与点击贡献。
门户网站导航不能靠“堆图标”或“拉菜单”凑数，网格式布局（Grid Layout）本质是用视觉区块表达信息权重和访问路径，不是为了看起来像App首页。
导航项数量超过7个就该分层，别硬塞一整行
人眼短时记忆上限约7±2个信息单元，网页导航一旦超过7个一级栏目，用户扫视效率断崖下降。常见错误是把“新闻、产品、服务、关于我们、加入我们、投资者关系、新闻中心、行业方案、客户案例、下载中心”全平铺在顶部——这实际是把信息架构问题甩给了视觉设计。
实操建议：
- 用
grid-template-columns按语义分组：比如左侧放品牌相关（logo、about、career），中间放业务主干（products、solutions），右侧放支持类（support、contact） - 每组内部再用
display: flex微调间距，避免网格列宽被内容撑爆 - 移动端必须折叠为
hamburger menu，且折叠前要显式声明aria-expanded状态，否则读屏器无法感知展开/收起变化
Grid区域命名必须带业务前缀，别用grid-area: "nav"
直接写grid-area: "nav"会导致所有导航区块共享同一区域名，后续加搜索框、语言切换、登录入口时极易覆盖错位。更糟的是，当使用grid-template-areas做响应式重排时，未加前缀的区域名会相互污染。
立即学习“前端免费学习笔记（深入）”；
正确做法是绑定职责：
-
grid-area: "header-logo"—— 仅放logo和标语 -
grid-area: "header-main-nav"—— 仅承载主导航链接 -
grid-area: "header-tools"—— 放搜索、语言、登录等工具入口 - 所有
grid-area值统一维护在CSS自定义属性里，例如--grid-area-main-nav: "header-main-nav"，便于全局替换
鼠标悬停下拉菜单必须用prefers-reduced-motion兜底
纯CSS实现的:hover下拉菜单，在系统开启“减少动画”偏好时仍会触发淡入/滑动，违反WCAG 2.3.3原则。这不是体验问题，是合规红线。
关键处理点：
- 用
@media (prefers-reduced-motion: reduce)包裹所有transition和transform - 下拉容器默认
visibility: hidden; opacity: 0，悬停时只改visibility: visible，禁用opacity过渡 - 键盘用户用
Tab聚焦到父项时，必须同步展开菜单（监听focusin事件），且菜单关闭需支持Esc键 - 不要依赖
pointer-events: none隐藏下拉区——它会让键盘焦点穿透失效
网格式导航最难的不是代码，是敢砍栏目。每个格子都得回答清楚：这个入口是否承担了独立用户目标？是否在最近30天内贡献了≥5%的站内点击？没答案的格子，不如先留空。
