要自定義菜單,您可以使用JavaScript來捕獲鼠標右鍵點擊事件(oncontextmenu事件),然后顯示您自定義的菜單。以下是一個示例代碼:
<!DOCTYPE html>
<html>
<head>
<title>Custom Context Menu</title>
<style>
.menu {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 5px;
}
</style>
</head>
<body>
<div class="menu" id="customMenu">
<ul>
<li onclick="alert('Menu Item 1 Clicked')">Menu Item 1</li>
<li onclick="alert('Menu Item 2 Clicked')">Menu Item 2</li>
<li onclick="alert('Menu Item 3 Clicked')">Menu Item 3</li>
</ul>
</div>
<script>
document.oncontextmenu = function(e) {
e.preventDefault();
var customMenu = document.getElementById("customMenu");
customMenu.style.display = "block";
customMenu.style.left = e.pageX + "px";
customMenu.style.top = e.pageY + "px";
};
document.onclick = function() {
var customMenu = document.getElementById("customMenu");
customMenu.style.display = "none";
};
</script>
</body>
</html>
在這個示例中,我們首先創建了一個包含三個菜單項的自定義菜單。然后,我們使用JavaScript捕獲oncontextmenu事件,并阻止默認的右鍵菜單彈出。接著,我們根據鼠標點擊位置來顯示自定義菜單,并在文檔的其他地方點擊時隱藏菜單。
您可以根據自己的需求修改菜單內容和樣式。希望這可以幫助到您!