Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a custom right-click menu to a webpage?
In today’s time, when you right click on any web page there will be a list of some with some options and functionality pops up. This popup menu is also known as the context menu which is a default popup menu given by browser. The items in the list of this menu varies in different browsers. Some browsers provide more functionality while some provides limited.
But here’s a way to add your own custom context menu or the right click menu on your web page with as much as options as you want. But before adding the custom context menu, you need to change the behaviour of the default right click on the web page which opens up the default context menu. The custom context menu addition consists of below listed two steps −
Changing the default behaviour of showing the default right click menu.
Adding our own custom context menu and show it on the web page on click to the right button on mouse.
Let us now understand the above two steps one by one in details by practically implementing them with the help of the code examples.
Removing or Hiding the Default Context Menu
To show our custom context menu on right click to the web page, first we need to remove or hide the default context menu and change the default behaviour of the right click by assigning a function that contains the preventDefault() method to prevent the default behaviour of the right click to the document.oncontextmenu event, which calls the function when user right click the web page.
Let us discuss the practical implementation of preventing the default behaviour of hiding the default context menu.
Steps
Step 1 − In the first step, we will create a HTML document and create a web page to test our code.
Step 2 − In this step, we will add the oncontextmenu event to the HTML document, as the menu opens up on right click to the entire web page.
Step 3 − In the final step, we will define a JavaScript function with preventDefault() method or return false; statement to prevent the default context menu from popup.
Example
The below example will illustrate how you can change the default behaviour 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 have seen how we can remove or hide the default context menu functionality on right click to a page by assigning a function with preventDefault() method.
Let us now understand how we can add our custom context menu and make it visible on right click to the page.
Steps
Step 1 − In the first step, we will create a list of items we have to show in the context menu and keep it display: none; by default, so that, it can be visible only on right click to the page.
Step 2 − In the next step, we will style the list according to the requirements by Internal CSS using the <style> element.
Step 3 − In the final step, we will add the JavaScript functionality to the custom menu to show it on the web page once user right click on the page.
Example
Below example will explain how you can prevent default context menu to show as well as the way you can add and show the 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 have hidden the default context menu and show our own context menu that we have created on right click to the page at the position of cursor at the time of click.
Conclusion
In this article, we have seen how we can remove or hide the default context value on right click to the web page and show our own custom context menu on the same operation. In this way, we can add our custom context menu with as much as options we want to show in it.
2K+ Views
