超级菜单

本词条尚无可操作示例；插画为编辑示意，展示面板的分组版式，不代表已验证的实现。应用到产品前仍须实测悬停延迟与键盘路径，并确认窄屏下有不依赖悬停的退化形态。

{
  "states": [
    "closed",
    "open",
    "wide",
    "compact"
  ],
  "a11y": [
    "展开控件说明自身的展开状态，面板与其建立关联",
    "Escape 与移开焦点都能关闭，关闭后焦点回到触发项",
    "窄屏下退化为可逐级展开的列表，而不是被隐藏"
  ],
  "motion": "展开可以是瞬时的；减弱动态偏好下不做过渡动画"
}

{
  "id": "mega-menu",
  "type": "layout",
  "name": {
    "zh": "超级菜单",
    "en": "Mega Menu"
  },
  "aliases": [
    "Megamenu",
    "Mega Dropdown",
    "大型下拉菜单",
    "巨型菜单"
  ],
  "granularity": "component",
  "intents": [
    "navigate-sections",
    "find-option"
  ],
  "tags": [
    "导航",
    "下拉菜单",
    "分组",
    "站点结构",
    "一次可见"
  ],
  "definition": "从导航栏展开的大面积二维面板：把一个分区下的选项分成若干组同时铺开，一次全部可见、无需滚动，用版式与标题而不是层层展开来表达结构。",
  "boundary": "判定标准是\"二维面板、分组同时可见、不需要滚动\"，而不是\"下拉菜单里内容比较多\"。它不是层级导航的替代：超级菜单只暴露两到三层，再深的结构仍需要页面内的导航承担。它也不是对话框：面板是短暂出现的，不适合承载表单、设置或任何需要停留的交互。内容多到面板必须滚动时，这个模式的前提——一次看全——就已经不成立。",
  "signature": [
    "展开后是一块矩形面板，内部分成带标题的若干列",
    "所有选项一次可见，面板本身不滚动",
    "结构由版式、标题与可选的图标表达，而非逐级展开"
  ],
  "when": [
    "一个分区下的选项数量多，逐级展开会让用户反复等待",
    "用户需要在进入之前看清这个分区包含什么",
    "选项之间有明确的分组关系，值得用版式表达出来"
  ],
  "when_not": [
    "选项少到一列普通下拉就能装下",
    "面板里需要表单、设置或任何需要停留的交互",
    "内容多到面板必须滚动，\"一次看全\"的前提已经不成立"
  ],
  "tradeoff": "一次展示整个分区能省掉多次点击与等待，代价是面板会遮住页面的大片区域，而且它依赖悬停或点击触发——触发太灵敏会让页面闪烁，太迟钝又显得没反应。",
  "comparison": {
    "focus": "在进入之前看清一个分区的全貌",
    "mechanism": "从导航栏展开的分组二维面板，一次全部可见",
    "cost": "遮挡页面，且触发时机需要仔细调校"
  },
  "sources": [
    {
      "id": "megamenu-nng",
      "title": "NN/g · Mega Menus Work Well for Site Navigation",
      "url": "https://www.nngroup.com/articles/mega-menus-work-well/",
      "claim": "该文（2017 年 3 月 26 日）把超级菜单描述为一种可展开菜单，在二维下拉版式中同时呈现大量选项，其特征包括：被分成若干组的大型二维面板、以版式与排版（有时加图标）表达的导航结构、全部一次可见而无需滚动，以及通过悬停、点击或轻触展开；文章还建议依赖悬停展开的元素让指针静止 0.5 秒后再显示，否则屏幕会不停闪烁。本词条的定义与触发时机据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://www.nngroup.com/articles/mega-menus-work-well/",
        "status": "available",
        "checkedAt": "2026-09-16T13:28:24.880Z",
        "jobId": "spn2-3e1e9ae4ef1d6b7e89929a9c96957f6fb257fb94",
        "url": "https://web.archive.org/web/20260916132849/https://www.nngroup.com/articles/mega-menus-work-well/",
        "timestamp": "20260916132849"
      }
    },
    {
      "id": "megamenu-w3c-menus",
      "title": "W3C WAI · Menus Tutorial",
      "url": "https://www.w3.org/WAI/tutorials/menus/",
      "claim": "该教程说明导航菜单需要用标记表达其结构与当前位置，并要求所有菜单项都能用键盘到达与操作；本词条据此给出键盘与结构方面的要求，其具体实现细节以教程为准。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://www.w3.org/WAI/tutorials/menus/",
        "status": "pending",
        "checkedAt": "2026-09-22T11:59:24.307Z",
        "error": "status-request-failed",
        "jobId": "spn2-8d402eb47e447b21e7455690a332bb137d7f6fca"
      }
    }
  ],
  "relations": [
    {
      "target": "hierarchical-navigation",
      "kind": "composes_with",
      "condition": "站点层级超过超级菜单能暴露的两到三层",
      "reason": "超级菜单负责顶层的横向铺开，层级导航负责进入之后的纵深，二者互补而不是互相替代。",
      "basis": "editorial"
    },
    {
      "target": "modal-dialog",
      "kind": "alternative",
      "condition": "面板中出现需要停留完成的交互",
      "reason": "超级菜单是短暂出现、随时可能关闭的浮层，需要停留的交互应放进有明确关闭方式的对话框。",
      "basis": "editorial"
    },
    {
      "target": "site-footer",
      "kind": "related",
      "condition": "站点地图式的链接需要一个集中的呈现位置",
      "reason": "超级菜单服务于进入任务之前的导航，页脚服务于任务之后；两者可以并存，内容也常有重叠。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "菜单依靠悬停展开",
      "instruction": "设置约半秒的延迟再展开，并在指针离开后保留一小段宽限时间，避免掠过导航栏时面板不断闪烁。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "菜单在触屏或仅键盘的环境中使用",
      "instruction": "提供不依赖悬停的展开方式，让面板可用键盘进入与退出，且顶层项本身也能被激活。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "closed",
      "open",
      "wide",
      "compact"
    ],
    "a11y": [
      "展开控件说明自身的展开状态，面板与其建立关联",
      "Escape 与移开焦点都能关闭，关闭后焦点回到触发项",
      "窄屏下退化为可逐级展开的列表，而不是被隐藏"
    ],
    "motion": "展开可以是瞬时的；减弱动态偏好下不做过渡动画"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示面板的分组版式，不代表已验证的实现。应用到产品前仍须实测悬停延迟与键盘路径，并确认窄屏下有不依赖悬停的退化形态。",
  "image": {
    "src": "/images/mega-menu.webp",
    "alt": "一张名为 FIELDNOTES 的虚构网页示意：顶部导航栏的一项被激活，下方展开一块横跨大半个页面的矩形面板，面板内分成四列，每列有一条小标题占位条和若干条链接占位条。"
  },
  "searchTerms": [
    "navigation",
    "dropdown",
    "grouping",
    "site structure",
    "all visible"
  ]
}