<menu>-菜单列表

<menu> 标签在 HTML 中用于定义一组命令或操作的列表，通常表现为菜单栏、上下文菜单或工具栏。它支持嵌套结构，并可结合 JavaScript 实现动态交互。以下是其核心特性和用法详解。

<menu> 的基本语法

<menu> 标签的语法结构如下：

<menu>
  <li><button>操作1</button></li>
  <li><button>操作2</button></li>
</menu>

默认情况下，浏览器会将其渲染为无序列表（类似 <ul>），但通过 type 属性可以改变其行为：

<menu type="context" id="ctxmenu">
  <li><button onclick="cut()">剪切</button></li>
  <li><button onclick="copy()">复制</button></li>
</menu>

type 属性的作用

type 属性决定菜单的交互模式：

• toolbar：水平工具栏（已废弃，推荐用 <div role="toolbar">）
• context：右键上下文菜单（需配合 JavaScript 绑定）

示例：实现右键菜单

<!-- HTML -->
<menu type="context" id="filemenu">
  <li><button data-action="open">打开文件</button></li>
  <li><button data-action="save">保存</button></li>
</menu>
<div contextmenu="filemenu">右键点击此处</div>

<!-- JavaScript -->
<script>
  document.querySelector('div').addEventListener('contextmenu', (e) => {
    e.preventDefault();
    const menu = document.getElementById('filemenu');
    menu.style.display = 'block';
    menu.style.position = 'fixed';
    menu.style.left = `${e.clientX}px`;
    menu.style.top = `${e.clientY}px`;
  });
</script>

与 <menuitem> 的配合（已废弃）

历史上 <menuitem> 曾用于定义菜单项，但现代浏览器已废弃该标签。替代方案：

<menu>
  <li role="menuitem"><button>新建</button></li>
  <li role="menuitem"><button>删除</button></li>
</menu>

实际应用案例

案例1：编辑器工具栏

<menu class="toolbar" role="toolbar">
  <li><button aria-label="加粗" onclick="formatText('bold')">B</button></li>
  <li><button aria-label="斜体" onclick="formatText('italic')">I</button></li>
  <li><menu>
    <li><button>字号</button></li>
    <li><button>12px</button></li>
    <li><button>14px</button></li>
  </menu></li>
</menu>

案例2：嵌套下拉菜单

<menu class="dropdown">
  <li>
    <button>文件</button>
    <menu>
      <li><button>新建</button></li>
      <li><button>打开...</button></li>
      <li>
        <button>导出为</button>
        <menu>
          <li><button>PDF</button></li>
          <li><button>PNG</button></li>
        </menu>
      </li>
    </menu>
  </li>
</menu>

<style>
  .dropdown menu {
    display: none;
    position: absolute;
  }
  .dropdown li:hover > menu {
    display: block;
  }
</style>

无障碍访问建议

1. 始终为可操作元素添加 role：

   <menu role="menu">
     <li role="none"><button role="menuitem">保存</button></li>
   </menu>
   

2. 键盘导航支持：

   menu.addEventListener('keydown', (e) => {
     if (e.key === 'ArrowDown') {
       // 焦点移动到下一项
     }
   });
   

3. 使用 aria-haspopup 声明子菜单：

   <button aria-haspopup="menu">更多选项</button>
   

浏览器兼容性注意事项

• 现代浏览器对 type="context" 的支持有限，通常需要自定义实现
• 旧版 Firefox 曾支持 <menuitem>，但已移除
• 推荐使用 ARIA 角色替代原生语义：

  <div role="menu">
    <div role="menuitem" tabindex="0">选项1</div>
  </div>
  

与相似标签的对比

动态菜单的实现

通过 JavaScript 动态生成菜单项：

function createMenu(items) {
  const menu = document.createElement('menu');
  items.forEach(item => {
    const li = document.createElement('li');
    const btn = document.createElement('button');
    btn.textContent = item.label;
    btn.onclick = item.action;
    li.appendChild(btn);
    menu.appendChild(li);
  });
  return menu;
}

// 使用示例
document.body.appendChild(createMenu([
  { label: '刷新', action: () => location.reload() },
  { label: '打印', action: () => window.print() }
]));

样式定制技巧

/* 基础菜单样式 */
menu {
  list-style: none;
  padding: 0;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

menu li button {
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  background: none;
  border: none;
}

menu li button:hover {
  background-color: #f0f0f0;
}

/* 分隔线 */
menu li[role="separator"] {
  height: 1px;
  background: #eee;
  margin: 4px 0;
}