{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "mega-menu",
  "name": {
    "zh": "超级菜单",
    "en": "Mega Menu"
  },
  "page": "https://designvocabulary.com/zh/entries/mega-menu/",
  "self": "https://designvocabulary.com/zh/entries/mega-menu.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/mega-menu.json",
    "en": "https://designvocabulary.com/en/entries/mega-menu.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 137,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "megamenu-nng",
        "url": "https://www.nngroup.com/articles/mega-menus-work-well/",
        "title": "NN/g · Mega Menus Work Well for Site Navigation",
        "checkedAt": "2026-09-16",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916132849/https://www.nngroup.com/articles/mega-menus-work-well/",
          "capturedAt": "2026-09-16T13:28:49Z",
          "lookupUrl": "https://web.archive.org/web/20260916*/https://www.nngroup.com/articles/mega-menus-work-well/"
        }
      },
      {
        "id": "megamenu-w3c-menus",
        "url": "https://www.w3.org/WAI/tutorials/menus/",
        "title": "W3C WAI · Menus Tutorial",
        "checkedAt": "2026-09-16",
        "archive": {
          "status": "pending",
          "confirmed": false,
          "url": null,
          "capturedAt": null,
          "lookupUrl": "https://web.archive.org/web/20260916*/https://www.w3.org/WAI/tutorials/menus/"
        }
      }
    ],
    "lists": [],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "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"
    ]
  }
}