whole body
only to specific element
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Context Menu</title>
<style>
#contextMenu {
position: absolute;
background-color: white;
border: 1px solid #ccc;
display: none; /* Initially hidden */
z-index: 1000;
}
#contextMenu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#contextMenu li {
padding: 8px 12px;
cursor: pointer;
}
#contextMenu li:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="contextMenu">
<ul>
<li onclick="alert('Option 1 clicked')">Option 1</li>
<li onclick="alert('Option 2 clicked')">Option 2</li>
<li onclick="alert('Option 3 clicked')">Option 3</li>
</ul>
</div>
<script>
const contextMenu = document.getElementById('contextMenu');
// Show the context menu
document.addEventListener('contextmenu', (event) => {
event.preventDefault(); // Prevent the default context menu
contextMenu.style.display = 'block';
contextMenu.style.left = `${event.pageX}px`;
contextMenu.style.top = `${event.pageY}px`;
});
// Hide the context menu when clicking elsewhere
document.addEventListener('click', () => {
contextMenu.style.display = 'none';
});
</script>
</body>
</html>only to specific element
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Context Menu</title>
<style>
#contextMenu {
position: absolute;
background-color: white;
border: 1px solid #ccc;
display: none; /* Initially hidden */
z-index: 1000;
}
#contextMenu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#contextMenu li {
padding: 8px 12px;
cursor: pointer;
}
#contextMenu li:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<label id="recipeLabel" style="color:red;">Recipe :</label>
<div id="contextMenu">
<ul>
<li onclick="alert('Option 1 clicked')">Option 1</li>
<li onclick="alert('Option 2 clicked')">Option 2</li>
<li onclick="alert('Option 3 clicked')">Option 3</li>
</ul>
</div>
<script>
const contextMenu = document.getElementById('contextMenu');
const recipeLabel = document.getElementById('recipeLabel');
// Show the context menu only when right-clicking on the label
recipeLabel.addEventListener('contextmenu', (event) => {
event.preventDefault(); // Prevent the default context menu
contextMenu.style.display = 'block';
contextMenu.style.left = `${event.pageX}px`;
contextMenu.style.top = `${event.pageY}px`;
});
// Hide the context menu when clicking elsewhere
document.addEventListener('click', () => {
contextMenu.style.display = 'none';
});
</script>
</body>
</html>