Context Menu create using HTML, CSS and Javascript

A custom context menu is a great way to improve user interaction on your website, replacing the default browser right-click menu with something more appropriate to your design. Instead of a simple browser menu, you can provide a set of actionable actions that match your site category.

In this tutorial we will create a simple custom context menu using HTML, CSS and JavaScript. With that we will learn how to capture the right-click event and prevent the default behavior. Also we will add hover effect to make it look smoother.

HTML Editor:

HTML

CSS

JS

Result

HTML

First we will start by creating a simple layout in HTML that will contain a message for the user and a custom context menu. For that we will create an HTML div element with the class name "content" which will contain a title and a paragraph.

Next we will add another div element with the id and class "context-menu". Inside this element we will add an unordered list (HTML ul element) which will contain three list items (li are list items). Each li element has an onclick attribute which will display a simple alert when clicked.

Well here is our context menu layout ready. The next step is to add some CSS to style the menu, then use JavaScript to handle the right-click interaction.

<div class="content">
    <h1>Right-click anywhere on this page</h1>
    <p>Custom context menu will appear 
    instead of the default one.</p>
</div>

<div id="context-menu" class="context-menu">
    <ul>
        <li onclick="alert('Action 1 clicked')">Action 1</li>
        <li onclick="alert('Action 2 clicked')">Action 2</li>
        <li onclick="alert('Action 3 clicked')">Action 3</li>
    </ul>
</div>

Are you interested in CSS art? CSS Fish Animation | CSS Art

Stylesheet (CSS):

Styling the Page Background:

Let's get to the CSS section, first let's start with a bright background color to make our page stand out. Next we'll set the background of the document body to a yellow color using the hex code #FFEB3B. And set the font-family to Arial, sans-serif to make the text easier to read on all devices. For example, we willremove the default setup by setting the browser margin and padding to 0 and add some extra padding of 50px.

body {    
    background: #FFEB3B;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 50px;
}

Centering the content:

We want the content inside our "content" div to be centered, so we set text-align to center. This ensures that the heading and paragraph are aligned in the middle of the page.

.content {
    text-align: center;
}

Styling the menu:

Now let's style the context-menu. We set its position to absolute so that the user can right-click and place it exactly where they want. The background color is then set to white #fff, and we add a light border and shadow so that it stands out from the page content.

By default the menu is hidden using display. We also set a high z-index of 1000 to make sure it appears above other elements when shown. Finally we fixed the width at 150px for a nice consistent look.

.context-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    display: none;
    z-index: 1000;
    width: 150px;
}

Styling the list:

By going to the list inside the context menu, we remove the default styling by setting the CSS list-style property to none and resetting the margins and padding to 0. Next for each menu item li, we add 10px padding to make it easier to click. We also add a simple hover effect that changes the background color to #f2f2f2 when the user hovers over an item.

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu li {
    padding: 10px;
    cursor: pointer;
}

.context-menu li:hover {
    background-color: #f2f2f2;
}

Javascript:

At the beginning of the JavaScript we select the context menu element using getElementById.

Next we listen to the ContextMenu event, which is triggered when the user right-clicks anywhere on the page. We prevent the default browser menu from showing by calling e.preventDefault(). Then we get the mouse coordinates using e.pageX and e.pageY and set our custom context menu to those coordinates by setting the top and left styles. Finally we set display to block to show the menu.

We also listen for a regular click event anywhere on the document and hide the context menu by setting display to none .

const contextMenu = document.getElementById('context-menu');

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    const posX = e.pageX;
    const posY = e.pageY;

    contextMenu.style.top = `${posY}px`;
    contextMenu.style.left = `${posX}px`;
    contextMenu.style.display = 'block';
});

document.addEventListener('click', function() {
    contextMenu.style.display = 'none';
});

Are you interested in CSS art? CSS Pig Drawing | CSS Art

Today we are ending the Random Password Generator tutorial here, and if you have any questions about the Random Password Generator, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial by saying Nomoskar to the you.