{
  "slug": "mixednavigation",
  "end": "css",
  "curated": true,
  "summary": "CSS 端的 mixednavigation：与另外两个菜单共用样式，靠 data-direction=\"mixed\" 出顶部一级加侧边二级。",
  "usage": [
    "混合形态要写 data-direction=\"mixed\"：根容器得到 1px 边框、大圆角与 overflow:hidden，把顶栏与侧栏包成一块（frameworks/SideMenu.css:156-160）。",
    "顶部一级放在 .kole-menu-top 里：它是横向 flex 加 4px 间距与下边框，一级项高 48px（frameworks/SideMenu.css:161-167）。",
    "顶栏选中态是 2px 底部指示条：.kole-menu-top > .kole-menu-item.is-active::after 贴底、左右内缩 12px（frameworks/SideMenu.css:169-176）。",
    "侧边二级放在 .kole-menu-side 里：168px 宽、最小高 200px、表头底色加右分隔线，内层项高 40px（frameworks/SideMenu.css:177-184）。",
    "侧栏选中态是品牌浅底加左侧 3px 竖条（inset-inline-start:0、宽 3px）（frameworks/SideMenu.css:185-196）。",
    "顶栏项悬停只压掉底色（background:none），侧栏项的选中色由 .is-active 承接，两个方向的悬停规则不一致（frameworks/SideMenu.css:168、185-187）。",
    "徽标 .kole-menu-badge 与箭头 .kole-menu-arrow 是三个方向共用的类，箭头在 is-open 时旋转 90 度（frameworks/SideMenu.css:37-50）。"
  ],
  "bestPractices": [
    "mixed 与 side 的选中样式都是品牌浅底加 3px 竖条，但选择器前缀不同（[data-direction=\"mixed\"] > .kole-menu-side 与 [data-direction=\"side\"]），复制样式时不能跨方向套用（frameworks/SideMenu.css:185-196 与 133-141）。",
    "顶栏与侧栏必须分别是 .kole-menu-top 与 .kole-menu-side 的直接子元素，所有 rules 都写成 > 直接子选择器，中间加包装层会整套失效（frameworks/SideMenu.css:161、177）。",
    "三个菜单组件共用这一份生成样式，单独给 mixednavigation 加视觉时要走生成器模板，否则会被下次生成覆盖（frameworks/SideMenu.css:1-9）。"
  ],
  "a11y": [
    "混合导航的两级结构建议分别补导航语义（顶栏与侧栏各自 role 与可访问名称），示例在根上写了 role 与 aria-label（site/examples/mixednavigation.json）（frameworks/SideMenu.css:156）。",
    "顶栏选中条与侧栏竖条都是纯视觉指示，需要配合 aria-current 才能被读屏识别（frameworks/SideMenu.css:169-176、188-196）。",
    "侧栏二级默认不展开（display:none），展开需 .is-open 并同步 aria-expanded（frameworks/SideMenu.css:153）。"
  ],
  "apiCarrier": {
    "kind": "classes",
    "note": "CSS 端无 props：契约载体是 .kole-menu 加 .kole-menu-top / -side（两个方向容器）与 .kole-menu-item / -icon / -label / -badge / -arrow / -children；混合形态由根元素 data-direction=\"mixed\" 参数表达，状态为 is-active / is-disabled / is-open。",
    "table": [
      {
        "name": "kole-menu",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-menu-item",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "is-active",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "is-disabled",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-menu-icon",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-menu-label",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-menu-badge",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-menu-arrow",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "is-open",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-menu-children",
        "type": "类名",
        "desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
      }
    ]
  },
  "resources": [
    {
      "file": "frameworks/MixedNavigation.css",
      "kind": "CSS",
      "desc": "该端实现（本页 API 与用法的唯一权威来源）。"
    }
  ],
  "exampleIds": [
    "mixednavigation-ex-1",
    "mixednavigation-ex-2",
    "mixednavigation-ex-3"
  ],
  "notes": [
    "mixed 容器与顶栏见 frameworks/SideMenu.css:156-176，侧栏见 frameworks/SideMenu.css:177-196，子级展开见 frameworks/SideMenu.css:148-153。",
    "MixedNavigation.css 与 SideMenu.css、TopMenu.css 逐字节相同，文件头 frameworks/SideMenu.css:5 明确三者共用同一份样式。",
    "示例三例（默认 / 含徽章与禁用 / 二级联动）都只写 .kole-menu 根，方向参数由页面脚本设（site/examples/mixednavigation.json）。"
  ]
}