Create a custom right click context menu using HTML, CSS and JavaScript

by Jay Mistry · May 13, 2020

Web-Development

You may have seen custom context menus which open on right click, and provide more functionalities without taking up much screen space. Today we will learn how to create a custom context menu for your site! You can see the code in action on YouTube.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Context Menu</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="clickable">
      Right Click Me!
    </div>

    <ul id="menu">
      <li class="menu-item">Action 1</li>
      <li class="menu-item">Action 2</li>
      <li class="menu-item">Action 3</li>
      <li class="menu-item">Action 4</li>
    </ul>

    <div id="out-click"></div>

    <script src="script.js"></script>
  </body>
</html>

We have created a clickable area having id clickable which will listen for our right-clicks. In real life projects, it can be a card, image or any other element.

The menu itself is created using unordered list having id menu. It has four menu items which can be replaced with buttons performing real actions like delete.

We have also created a div with id out-click which will listen for clicks outside of our context menu, so that we can close the menu by clicking outside.

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
}

#clickable {
  display: block;
  background-color: #efefef;
  height: 300px;
  width: 300px;
  border-radius: 20px;
  box-shadow: 0px 5px 30px -10px grey;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: grey;
}

#menu {
  display: block;
  background-color: white;
  padding: 10px 0px;
  border-radius: 5px;
  box-shadow: 2px 2px 30px lightgrey;
  position: absolute;
  transform-origin: center;
  z-index: 2;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.2s, opacity 0.2s;
}

#menu.show {
  opacity: 1;
  transform: scale(1);
  transform-origin: top left;
}

.menu-item {
  display: block;
  padding: 10px 30px;
  transition: 0.1s;
  color: #666;
}

.menu-item:hover {
  background-color: #eee;
  cursor: pointer;
}

#out-click {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
}

We are using the opacity and transform: scale properties to animate the menu. The transform-origin property is used so that the menu appears to originate from the cursor.

script.js

  const clickable = document.getElementById('clickable')
  const menu = document.getElementById('menu')
  const outClick = document.getElementById('out-click')

  clickable.addEventListener('contextmenu', e => {
    e.preventDefault()

    menu.style.top = `${e.clientY}px`
    menu.style.left = `${e.clientX}px`
    menu.classList.add('show')

    outClick.style.display = "block"
  })

  outClick.addEventListener('click', () => {
    menu.classList.remove('show')
    outClick.style.display = "none"
  })

First we create references for our clickable area, our menu and the div which listens for clicks outside the menu.

Then we add a listener for the JavaScript event contextmenu to the clickable area. We use preventDefault() to prevent the opening of default context menu of the browser. Then we assign the mouse X and Y positions to the menu and add the class show which displays the menu. We also set the display property of div which listens for clicks outside the menu to none.

We also add an event listener for click event on the outside click listener div, and remove the show class from the menu to hide it, and also hide the outside click listener div.

With this, our context menu is ready to be used!

Check the code in action on Codepen

See the Pen custom right click context menu using HTML, CSS and JavaScript by Tech no Kami (@technokami) on CodePen.