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.
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 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.
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 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