coastdigitalgroup/coastai-skills

超级菜单导航系统

目的

超级菜单导航系统为高密度、多列二维下拉面板提供了系统化的视觉、结构和交互框架。当网站规模超出简单的一维线性导航列表时，超级菜单能够在一个可展开的视图中展示结构化的内容层级、分类的产品层次结构、功能展示、宣传卡片以及特色推广卡片。

作为企业平台、大型电商网站和内容中心的关键架构网关，超级菜单解决了导航中的主要痛点：隐藏的深层链接、不稳定的悬停下拉（“鼠标对角线移动陷阱”）、无法通过键盘遍历、混乱的多列布局以及触控视口响应不佳的问题。

使用场景

• 企业 SaaS 和 B2B 平台： 将复杂的产品生态系统（例如，产品、按行业划分的解决方案、平台功能、资源、客户案例）组织成不同的主题列，并配备推广卡片。
• 大型电商目录： 展示多级产品分类（例如，类别 -> 子类别 -> 特色收藏和热门品牌），并配有丰富的视觉缩略图和徽章高亮。
• 大学和知识门户： 将行政部门、学术院系、学生门户和研究目录分组成高密度的分类面板。
• 出版商和媒体中心： 在多个编辑领域、特色视频系列、热门标签和新闻通讯订阅触发之间导航。

何时不使用

• 小型到中型网站（总页面数 < 10）： 对于扁平或浅层信息架构，请使用 site-navigation-system 或 breadcrumb-wayfinding-system。
• 应用内工具导航： 对于动态 SaaS 应用工具栏或工作区工具，请使用 sidebar-navigation-system 或 command-palette-system。
• 顺序多步骤工作流： 对于线性任务流程（例如，多步骤结账或引导向导），请使用 step-progress-system 或 onboarding-tour-system。
• 线性阅读页面内导航： 用于在活动文章或文档内跳转到章节，请使用 table-of-contents-system。

输入

1. 信息架构（IA）： 分类的树状结构（父触发器 -> 列分组 -> 子链接 -> 描述/徽章元数据）。
2. 设计令牌： 全局排版比例、间距令牌（gap、padding）、背景填充、边框半径、阴影深度和强调色板。
3. 推广资产内容： 图片宽高比、标题、副文本和面板内特色卡片的 CTA 按钮标签。
4. 交互规范： 悬停意图时间阈值（延迟进入、延迟退出、光标路径缓冲区几何形状）和焦点管理策略。
5. 断点边界： 定义桌面端二维面板何时过渡到移动端多级下钻抽屉或手风琴的视口阈值。

输出

1. 超级菜单面板几何与空间网格： 二维列布局规范（例如，3列链接矩阵 + 1列特色推广卡片），具有严格的填充和间距边界。
2. 触发器-面板交互系统： 悬停意图缓冲区规格、焦点管理路由、键盘控制映射和退出行为。
3. 无障碍标记架构： HTML 结构模板，包含完整的 ARIA 语义（aria-expanded、aria-controls、aria-haspopup、role="navigation"）。
4. 响应式移动端自适应策略： 将桌面端超级面板转换为触控优化的下钻面板或嵌套手风琴的转换规范。

---

工作流程

1. 构建空间网格（二维列构成）

超级菜单面板必须在信息密度和高视觉可扫描性之间取得平衡。将下拉面板设计为一个结构化的网格容器，该容器直接对齐到主导航栏或全视口宽度：

• 容器几何： 相对于主导航头部或头部容器进行绝对定位（top: 100%）。使用全宽（width: 100% 在最大容器边界内，例如 1200px 或全视口覆盖），并带有充足的内边距（例如，padding: 24px 32px 或 var(--space-l)）。
• 列分配模式：
  • 标准 4 列布局（3 列链接 + 1 列推广）： 3 列用于链接分组（每列宽度 22–25%）+ 1 列用于特色推广卡片或快速 CTA 块（宽度 25–30%）。
  • 分类 3 列矩阵： 3 个等宽列用于高密度类别列表，包含类别标题、子链接和描述。
  • 主从拆分面板： 左侧边栏列（宽度 20–25%）包含垂直类别标签，驱动右侧动态显示面板（宽度 75–80%）中的内容。
• 间距和空间比例： 在列之间保持严格的流式间距（gap: 24px 到 32px），以确保清晰的视觉分离而不碎片化。

2. 设计列内的内容结构

每列代表一个不同的语义分组。按层级优先组织元素：

• 列标题/部分标题： 使用清晰的视觉区别来标识组标题（例如，大写/粗体、font-size: 0.875rem、letter-spacing: 0.05em、柔和的品牌色）。
• 链接项行结构：
  • 标题： 主要标签，高对比度文本（最低 4.5:1）。
  • 图标/徽章（可选）： 前导 20x20px 图标或尾部内联徽章（例如，“New”、“Beta”、“Popular”）。
  • 描述（可选）： 柔和的辅助文本（1–2 行、font-size: 0.8125rem、对比度 4.5:1 的颜色），解释目标位置。
• 特色推广卡片结构：
  • 突出显示高价值转化目标（例如，新功能发布、电子书、演示请求）。
  • 结构包括视觉缩略图（aspect-ratio: 16/9）、粗体标题、简洁文案和样式化的按钮/链接 CTA。卡片背景应使用微妙的色调或表面对比度（background: var(--surface-subtle)）。

3. 实现悬停意图和光标遍历保护

当用户将鼠标从菜单触发器对角移动到超级面板中的链接时，会意外经过相邻的触发器并过早关闭菜单，这被称为“鼠标对角线移动陷阱”。

• 悬停意图缓冲区：
  • 延迟阈值： 在打开菜单前应用最小悬停延迟（150ms–200ms），以防止光标快速划过导航栏时出现闪烁。
  • 退出宽限期： 在光标离开触发器/面板边界后，保持面板打开状态 200ms–300ms。
• 安全悬停几何（瞄准三角形）：
  • 实现一个动态方向缓冲区多边形（瞄准三角形），其起点为活动触发器位置，终点为打开的超级菜单面板的顶部和底部角落。
  • 只要鼠标指针在此三角形边界内移动，就忽略对兄弟导航触发器的悬停状态转换。

4. 构建无障碍键盘导航和 ARIA 逻辑

超级菜单必须 100% 可通过键盘操作，并且完全可被辅助技术理解：

• 触发器语义：
  • 使用 HTML <button> 元素作为打开面板的触发器，而不是普通的 <a> 标签或 <div>。
  • 根据面板状态动态设置 aria-expanded="true|false"。
  • 设置 aria-controls="mega-panel-[id]" 指向对应的面板容器 ID。
  • 设置 aria-haspopup="true"（或 aria-haspopup="dialog" / aria-haspopup="menu"，取决于内部角色）。
• 键盘遍历模式：
  • Tab：菜单关闭时，聚焦到标题栏中的下一个触发器。菜单打开时，将焦点按顺序移入打开的超级菜单面板中的链接。
  • Escape：立即关闭任何打开的超级菜单面板，并将焦点返回到父触发器按钮。
  • Arrow Keys（左/右）：在顶级主导航触发器之间导航。
  • Arrow Keys（下/上）：在打开的超级面板列内从上到下导航链接。

5. 定义响应式移动端自适应策略

桌面端多列超级面板无法水平适应移动屏幕（< 768px/1024px）。

• 移动端下钻抽屉模式（推荐）：
  • 将桌面端标题转换为滑动移动抽屉（100vw 或 320px–400px 固定滑出）。
  • 使用多级滑动面板堆栈：点击主触发器会将抽屉滑动到第 2 级（类别链接），并带有突出的“← 返回”顶部按钮。
• 手风琴堆叠替代方案：
  • 主触发器垂直折叠成手风琴标题。点击触发器会在其下方内联展开列链接。
  • 确保所有移动端类别触发器和链接的触控目标至少达到 44x44px。

---

决策规则

超级菜单布局模式的选择

架构类型	推荐布局模式	决策标准
企业 SaaS（产品、解决方案、资源）	3 列链接 + 1 列特色卡片	除了产品列表外，还高度需要展示顶级转化资产（例如，案例研究、演示）。
深度电商（100+ 类别）	主从拆分面板（标签式类别）	需要浏览数十个子类别，且不会使垂直视口高度过载。
内容中心/出版商	分类 3 列矩阵 + 底部横幅	专注于多领域文章类别，并配有热门标签徽章和新闻通讯栏。
实用工具密集型平台（开发工具、API 文档）	高密度 4 列文本链接（带徽章）	优先考虑直接链接访问和速度，而非视觉推广媒体。

悬停与点击触发机制

触发行为	应用场景	设计与无障碍理由
带意图缓冲区的悬停 + 点击支持	桌面 Web 门户、企业 SaaS	为鼠标用户提供快速、低摩擦的扫描体验，同时为混合设备保留点击/轻按功能。
严格点击打开	复杂仪表盘、高密度 Web 应用	消除光标快速移动时的意外打开；适用于视口精度至关重要的应用。
触控轻按切换	移动和平板视口	鼠标悬停事件在触控视口上不存在；轻按必须显式切换打开状态或下钻。

---

约束

• 无障碍（WCAG 2.2 AA 最低标准）：
  • SC 2.4.7 焦点可见： 所有触发器、子链接和推广 CTA 按钮上必须有可见、未裁剪的高对比度焦点环（2px 实线强调色并带偏移）。
  • SC 2.4.11 焦点未被遮挡： 当向后导航时，超级菜单面板绝不能遮挡触发器按钮的活动焦点指示器。
  • SC 2.5.8 目标大小： 移动抽屉和桌面链接内的所有触控目标必须至少为 24x24px（桌面）和 44x44px（移动端）。
  • SC 1.4.3 对比度： 链接标题必须与面板背景保持至少 4.5:1 的对比度；次要描述文案也必须达到 4.5:1。
• 视口边界包含： 超级菜单面板绝不能导致页面出现水平滚动条（视口边界 overflow-x: hidden）或超出边缘边界。
• 动态 Z 索引堆叠： 超级菜单必须使用清晰的 z-index 层级（例如，z-index: 1000），位于英雄元素、粘性标题和页面内容之上，但位于模态对话框和提示框之下。

---

常见失败模式

• 鼠标陷阱（无悬停意图）： 光标刚一离开严格的直线就关闭超级面板，使用户难以对角移动到链接。
• 键盘黑洞： 悬停时可视地打开超级面板，但未能允许键盘 Tab 焦点进入面板，导致深层链接对屏幕阅读器和键盘用户不可访问。
• 非语义锚点触发器： 使用 <a href="/products"> 作为超级菜单切换开关，但没有 ARIA 属性，导致屏幕阅读器将其宣布为简单链接，而非可展开的菜单按钮。
• 视口溢出： 在中型桌面屏幕（例如，1024px）上对超级面板硬编码固定像素宽度（例如 1200px），导致出现水平滚动条。
• 移动端桌面面板挤压： 将桌面端 4 列超级面板缩小到移动屏幕上，导致文本不可读和点击目标极小。

---

验证标准

• 结构化二维空间网格： 超级菜单面板使用清晰的多列布局，具有明确的内边距、列间距和可选的推广卡片容器。
• 无障碍按钮触发器： 顶级触发器使用带有 aria-expanded、aria-controls 和 aria-haspopup 属性的 <button> 元素。
• 键盘可导航： 完整的键盘支持，允许顺序 Tab 遍历进入面板，Escape 键关闭，并将焦点返回到父触发器。
• 悬停意图和安全缓冲区： 实现了悬停延迟（150ms–200ms）和退出宽限期（200ms–300ms）或安全光标几何缓冲区。
• 移动端堆叠/下钻： 在屏幕宽度 < 768px 时，能干净地转换为针对移动端优化的下钻面板或垂直手风琴的抽屉。
• 对比度 AA 合规： 所有文本（链接标题、类别标题、辅助描述）与面板背景的对比度至少达到 4.5:1。
• 未遮挡的焦点环： 超级菜单内每个可聚焦的链接和按钮都有活动、可见、高对比度的焦点指示器。