在 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