Home >Web Front-end >CSS Tutorial >How to add a custom right-click menu to a web page?
How to add a custom right-click menu to a web page?
- WBOYforward
- 2023-09-15 23:29:021002browse
In this day and age, when you right-click on any web page, a list pops up with some options and features. This pop-up menu is also called the context menu, which is the default pop-up menu provided by the browser. The items in this menu list will vary between browsers. Some browsers offer more features, while others offer limited features.
But here is a way to add a custom context menu or right-click menu to your web pages, with as many options as you want. But before you can add a custom context menu, you need to change the behavior of the default right-click on a web page, which opens the default context menu. Adding a custom context menu involves the following two steps:
Change the default behavior of showing the default right-click menu.
Add our own custom context menu and display it on the web page with a right mouse click.
Let us now understand the above two steps in detail step by step through actual code examples.
Remove or hide the default context menu
In order to show our custom context menu when right-clicking on a web page, first we need to remove or hide the default context menu by assigning a function containing the preventDefault() method to document.oncontextmenu event to change the default behavior of right-click, which calls this function when the user right-clicks on the web page.
Let's discuss the actual implementation of the default behavior that prevents hiding of the default context menu.
step
Step One − In the first step, we will create an HTML document and create a web page to test our code.
Step 2 - In this step, we will add the oncontextmenu event in the HTML document because the menu will pop up when right clicking on the entire web page.
Step 3 - In the final step, we will define a JavaScript function with a preventDefault() method or return false; statement to prevent the default context menu from popping up.
Example
The following example will illustrate how to change the default behavior of the default context menu and hide it−
<html>
<body>
<div style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
<h2>It is the Demo web page for testing. </h2>
</div>
<script>
document.oncontextmenu = hideRightClickMenu;
function hideRightClickMenu(event) {
event.preventDefault()
// OR
// return false;
}
</script>
</body>
</html>
In the above example, we saw how to remove or hide the default context menu functionality when right-clicking on a page by assigning a function using the preventDefault() method.
Let us now understand how to add a custom context menu and make it visible when right clicking on the page.
step
Step 1 - In the first step we will create a list of items that must be shown in the context menu and keep it shown: None; by default, only right click Click on the page to see it.
Step 2 - In the next step, we will use the
-
Step 3 - In the final step, we will add JavaScript functionality to the custom menu to display it on the web page after the user right-clicks on the page.
Example
The following examples will illustrate how to prevent the default context menu from being displayed, and how to add and display a custom context menu −
<html>
<head>
<style>
#customContextMenu {
position: absolute;
background-color: #84abb5;
color: white;
height: 150px;
width: 100px;
text-align: center;
}
.menuItems {
list-style: none;
font-size: 12px;
padding: 0;
margin: 0;
}
.menuItems .items { padding: 5px; border-bottom: 1px solid #e6d4b6;}
.menuItems .items:last-child { border: none;}
.menuItems .items a {text-decoration: none; color: white;}
</style>
</head>
<body>
<div style = "background-color: green; color: white; height: 150px; text-align: center;">
<h2> Add a custom right-click menu to a webpage </h2>
<p> Please right click to to see the menu </p>
</div>
<div id = "customContextMenu" style = "display: none;">
<ul class = "menuItems">
<li class = "items"><a href = "#"> Menu Item-1 </a></li>
<li class = "items"><a href = "#"> Menu Item-2 </a></li>
<li class = "items"><a href = "#"> Menu Item-3 </a></li>
<li class = "items"><a href = "#"> Menu Item-4 </a></li>
<li class = "items"><a href = "#"> Menu Item-5 </a></li>
<li class = "items"><a href = "#"> Menu Item-6</a></li>
</ul>
</div>
<script>
// hiding the menu on click to the document
function hideCustomContextMenu() {
document.getElementById('customContextMenu').style.display = "none";
}
// toggling the menu on right click to the page
function showCustomContextMenu(event) {
event.preventDefault();
var myContextMenu = document.getElementById('customContextMenu');
if (myContextMenu.style.display == "block") {
myContextMenu.style.display = "none";
}
else {
myContextMenu.style.display = "block";
myContextMenu.style.left = event.pageX + "px";
myContextMenu.style.top = event.pageY + "px";
}
}
document.onclick = hideCustomContextMenu;
document.oncontextmenu = showCustomContextMenu;
</script>
</body>
</html>
In this example, we hide the default context menu and display our own created context menu when right-clicking on the page, at the position of the cursor when clicked.
in conclusion
In this article, we learned how to remove or hide the default context value when right-clicking on a web page, and display our own custom context menu in the same action. In this way we can add a custom context menu with the options we want to be displayed in it.
The above is the detailed content of How to add a custom right-click menu to a web page?. For more information, please follow other related articles on the PHP Chinese website!