How to Add a Custom Right-Click Menu to a Webpage?

Last Updated : 25 Jul, 2024

Adding a custom right-click menu to a webpage can enhance user interaction by providing tailored options that improve functionality and user experience. This technique involves overriding the default browser context menu with a custom-designed menu, which can be achieved using JavaScript and CSS. Implementing a custom right-click menu allows you to offer specific actions and features relevant to your website's context, making it a powerful tool for creating more engaging and intuitive web applications.

Approach

Create the HTML structure: Define the custom context menu as a hidden <div> with a list of menu items.
Style the menu using CSS: Set the position, appearance, and hover effects for the context menu.
Handle right-click events with JavaScript:
- Override the default context menu with document.oncontextmenu.
- Display the custom menu at the cursor position.
- Hide the menu when clicking elsewhere using document.onclick.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        .context-menu {
            position: absolute;
            text-align: center;
            background: lightgray;
            border: 1px solid black;
        }

        .context-menu ul {
            padding: 0px;
            margin: 0px;
            min-width: 150px;
            list-style: none;
        }

        .context-menu ul li {
            padding-bottom: 7px;
            padding-top: 7px;
            border: 1px solid black;
        }

        .context-menu ul li a {
            text-decoration: none;
            color: black;
        }

        .context-menu ul li:hover {
            background: darkgray;
        }
    </style>

</head>

<body>
    <h1 style="text-align: center;">
        Welcome to GeeksforGeeks.
    </h1>
    <h1 style="text-align: center;">
        Hi, We are creating a
        custom context menu here.
    </h1>

    <div id="contextMenu" class="context-menu" style="display:none">
        <ul>
            <li><a href="#">Element-1</a></li>
            <li><a href="#">Element-2</a></li>
            <li><a href="#">Element-3</a></li>
            <li><a href="#">Element-4</a></li>
            <li><a href="#">Element-5</a></li>
            <li><a href="#">Element-6</a></li>
            <li><a href="#">Element-7</a></li>
        </ul>
    </div>

    <script>
        document.onclick = hideMenu;
        document.oncontextmenu = rightClick;

        function hideMenu() {
            document.getElementById(
                "contextMenu").style.display = "none"
        }

        function rightClick(e) {
            e.preventDefault();

            if (document.getElementById(
                "contextMenu").style.display == "block")
                hideMenu();
            else {
                let menu = document
                    .getElementById("contextMenu")

                menu.style.display = 'block';
                menu.style.left = e.pageX + "px";
                menu.style.top = e.pageY + "px";
            }
        }
    </script>
</body>

</html>

Output:

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 disable right-click option using the jQuery ?

devansh07

Improve

Article Tags :

How to Add a Custom Right-Click Menu to a Webpage?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?