<menu>-菜单列表

<menu> 是 HTML 中用于定义菜单列表的标签，通常与 <li> 结合使用，表示一组用户可交互的选项。它既可用于上下文菜单，也可作为工具栏或命令列表的容器。以下是关于 <menu> 的详细解析和实际应用示例。

<menu> 的基本语法

<menu> 标签的语法结构简单，通常包含多个 <li> 子元素。基本形式如下：

<menu>
  <li><button>选项1</button></li>
  <li><button>选项2</button></li>
</menu>

<menu> 默认渲染为无序列表，但通过 type 属性可以改变其行为。例如，type="context" 表示上下文菜单，需配合 JavaScript 实现功能。

<menu> 的属性

type 属性

• type="toolbar"：将菜单渲染为工具栏，选项水平排列。
• type="context"：定义上下文菜单，需通过 contextmenu 属性绑定到其他元素。

<!-- 工具栏示例 -->
<menu type="toolbar">
  <li><button>剪切</button></li>
  <li><button>复制</button></li>
</menu>

<!-- 上下文菜单示例 -->
<div contextmenu="file-menu">右键点击此处</div>
<menu type="context" id="file-menu">
  <li><button>打开</button></li>
  <li><button>删除</button></li>
</menu>

label 属性

为菜单提供描述性标签，辅助技术（如屏幕阅读器）会读取此值。

<menu label="文件操作">
  <li><button>新建</button></li>
</menu>

实际应用场景

1. 上下文菜单

通过 JavaScript 触发自定义右键菜单：

<div id="target">右键点击这里</div>
<menu type="context" id="ctx-menu">
  <li><button onclick="alert('已刷新')">刷新</button></li>
</menu>

<script>
  document.getElementById("target").addEventListener("contextmenu", (e) => {
    e.preventDefault();
    const menu = document.getElementById("ctx-menu");
    menu.style.display = "block";
    menu.style.position = "absolute";
    menu.style.left = `${e.clientX}px`;
    menu.style.top = `${e.clientY}px`;
  });
</script>

2. 工具栏菜单

模拟编辑器工具栏：

<menu type="toolbar">
  <li><button onclick="formatText('bold')">加粗</button></li>
  <li><button onclick="formatText('italic')">斜体</button></li>
</menu>

<script>
  function formatText(type) {
    console.log(`应用格式：${type}`);
  }
</script>

与 <ul> 的对比

虽然 <menu> 和 <ul> 均可渲染列表，但语义不同：

• <ul> 表示普通项目列表。
• <menu> 强调交互性，适合操作项集合。

<!-- 适合用 <ul> 的场景 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<!-- 适合用 <menu> 的场景 -->
<menu>
  <li><button>保存</button></li>
  <li><button>撤销</button></li>
</menu>

兼容性与注意事项

• 现代浏览器普遍支持 <menu>，但部分旧版本可能需 polyfill。
• 上下文菜单需手动实现隐藏逻辑（如点击外部关闭菜单）。
• 避免嵌套多层 <menu>，可能导致交互复杂度上升。

<!-- 动态菜单示例 -->
<menu id="dynamic-menu"></menu>

<script>
  const items = ["登录", "注册", "退出"];
  const menu = document.getElementById("dynamic-menu");
  items.forEach(item => {
    const li = document.createElement("li");
    li.innerHTML = `<button>${item}</button>`;
    menu.appendChild(li);
  });
</script>

无障碍访问建议

• 为按钮添加 aria-* 属性：

  <menu>
    <li><button aria-label="关闭当前标签页">关闭</button></li>
  </menu>
  

• 使用键盘导航时，确保菜单项可通过 Tab 键聚焦。