Home > Article > Web Front-end > 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:02936browse

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!

JavaScript css html 事件

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Animating CSS height propertiesNext article：Animating CSS height properties

See more

How to add a custom right-click menu to a web page?

Remove or hide the default context menu

step

Example

step

Example

in conclusion

Related articles