<menu> 标签是 HTML5 中的标签之一,用于定义上下文菜单(context menu)。上下文菜单通常在用户右键点击页面或特定元素时显示,提供与上下文相关的操作选项。然而,<menu> 标签在 HTML5 中已被废弃,不再被推荐使用。

在 HTML5 中,通常使用 JavaScript 和 CSS 来创建和控制上下文菜单,而不再依赖于 <menu> 标签。下面是一个简单的示例,使用 JavaScript 和 CSS 创建一个上下文菜单:

HTML:
<div id="context-menu">
  <ul>
    <li>操作1</li>
    <li>操作2</li>
    <li>操作3</li>
  </ul>
</div>

CSS:
#context-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
}

#context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#context-menu li {
  cursor: pointer;
}

JavaScript:
document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  var contextMenu = document.getElementById('context-menu');
  contextMenu.style.display = 'block';
  contextMenu.style.left = event.pageX + 'px';
  contextMenu.style.top = event.pageY + 'px';

  document.addEventListener('click', function () {
    contextMenu.style.display = 'none';
  });
});

在这个例子中,当用户右键点击页面时,会触发 contextmenu 事件,阻止默认的浏览器上下文菜单,并显示自定义的上下文菜单。当用户单击页面的其他地方时,上下文菜单会隐藏。这种方法允许更灵活地创建和控制上下文菜单,而不依赖于 <menu> 标签。


转载请注明出处:http://www.zyzy.cn/article/detail/3747/HTML5