A right-click menu or context menu in a browser is a menu with multiple choices that appears on right-click mouse operation. It provides multiple functionalities relevant to that particular context. Sometimes, we want the context menu to have more options or features but we cannot modify the default context menu. So, we have to create a custom menu. Adding a custom context menu to your website or webpage makes it look more customized and relevant to the context and offers you the freedom to add desired features to it.
In this article, we will be creating a custom context menu for a webpage. It mainly involves two steps.
- Preventing the default context menu from popping up when the right mouse button is clicked.
- Creating our own custom context menu with HTML and CSS and displaying it on right-click.
Let us go through them in a step by step manner.
HTML code: The following HTML code snippet only shows the HTML page with the default menu which is displayed on right-click event.
If we right-click on this page, the default menu will pop up.
We will create a rightClick() function. In this function, we will call the preventDefault() method of the mouse click event which will cancel the default behavior of the right-click event. We can also return “false” to cancel the event. Now, the default menu will not pop-up on right-click mouse button.
HTML code: The following HTML code demonstrates how to prevent the default right click event.
The default menu is blocked. Let us create our own custom context menu. The context menu we are going to create will be an HTML list. We will also add some CSS to make it look good.
We are creating an unordered list inside a “div” tag with id and class. Add some options to the list. We will keep it hidden by setting the value of “display” property to none.
We will add an event handler for the click event and bind it with the hideMenu() function so that if the user clicks anywhere on the page and the context menu is already being displayed, it hides. Also, we have to place the menu where the right button is clicked. To do this, we will use two properties pageX and pageY of the mouse click event which will give us the coordinates where the right button was clicked. We will hide the context menu on the mouse button click if it is already being displayed.
Output: The following output shows the custom context-menu appearing on the right-click.
On right-click, the menu appears but this is not what we want. We want it to appear where the button was clicked and it should actually look like a menu.
CSS code: We will add some CSS properties for the proper positioning and styling of the menu.
Final code: The following is the combination of the above code snippets.
This was a basic context menu that we created. You can do much more by adding some cool hover effects, shadow effects, coloring, borders, etc.
- How to avoid dropdown menu to close menu items on clicking inside ?
- How To Add Google Translate Button On Your Webpage?
- How to Add Google Charts on a Webpage?
- How to Add Apple's new San Francisco font on a Webpage using CSS ?
- Reading selected webpage content using Python Web Scraping
- Reader's View of a GeeksforGeeks webpage
- How to redirect to another webpage in HTML?
- How to connect multiple MySQL databases on a single webpage ?
- How to get title of a webpage using Selenium in Python?
- Using Leaflet.js to show maps in a webpage
- How to click a button on webpage using selenium ?
- How to add active class on click event in custom list group in Bootstrap 4 ?
- How to add custom google search bar inside your web-page?
- How to add records in your own local/custom database in Node.js ?
- How to add unique Id to each record in your local/custom database in Node.js ?
- How to Add Google Custom Search Engine in New Google Sites ?
- How to create Radial Menu in CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.