Custom Right Click Context Menu in JavaScript

#javascript #webdev #beginners #html

This is a JavaScript tutorial where I showed you how to create Custom Right Click. If you know basic JavaScript you can create this Custom Right Click Context Menu.

We use more left click of the mouse. However, from the use of right click in most large websites or applications. This type of Custom Right Click Menu is used even in Windows and all other operating systems. Watch its live demo to learn how it works.

Here I will create a simple JavaScript Right Click Context Menu. And I will share complete information on how I made it.

JavaScript Custom Right Click Menu

This type of Custom Context Menu appears when you right-click anywhere on the webpage. Left click again to hide the Custom Menu bar.

As you can see, with the right click of the mouse, a small box appears. There are some menu items in that box. Although you can use something else instead of this menu.

Below I have given all the code and how it was created.

HTML Code

First I have added the menu items using a few lines of simple html. Here are 5 menu items used. You can increase the amount of this menu.

<div id="context-menu">
  <div class="item">View</div>
  <div class="item">Refresh</div>
  <div class="item">Copy</div>
  <div class="item">Customize</div>
  <div class="item">Save As</div>
</div>

CSS Code

Now I have designed the menu item and Right Click Context Menu by css.

First I designed the webpage using some code.
Then the basic design of context-menu has been done.
Here the menu bar's 'visibility: hidden' has been done. This means that the menu bar cannot be seen under normal conditions.
At the end I have designed the menu item and added the hover effect.

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}

body {
 background-color: #dfe8f1;
}

#context-menu {
 background-color: #ffffff;
 box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
 color: #1f194c;
 width: 10em;
 padding: 0.8em 0.6em;
 font-size: 1.3rem;
 position: fixed;
 visibility: hidden;
}

.item {
 padding: 0.3em 1.2em;
}

.item:hover {
 background-color: rgba(44, 141, 247, 0.2);
 cursor: pointer;
}

JavaScript

Now it's time to activate the Right Click Context Menu using JavaScript. In this case, every line of JavaScript has the necessary explanation.

Even if you are a beginner, you will not have any difficulty in understanding.

    //Events for desktop and touch
    let events = ["contextmenu", "touchstart"];

    //initial declaration
    var timeout;

    //for double tap
    var lastTap = 0;

    //refer menu div
    let contextMenu = document.getElementById("context-menu");

    //same function for both events
//event type is a data structure that defines the data contained in an event
    events.forEach((eventType) => {
      document.addEventListener(
        eventType,
        (e) => {
//preventDefault() method stops the default action of a selected element from happening by a user
          e.preventDefault();
          //x and y position of mouse or touch
//mouseX represents the x-coordinate of the mouse
          let mouseX = e.clientX || e.touches[0].clientX;
//mouseY represents the y-coordinate of the mouse.
          let mouseY = e.clientY || e.touches[0].clientY;
          //height and width of menu
//getBoundingClientRect() method returns the size of an element and its position relative to the viewport
          let menuHeight = contextMenu.getBoundingClientRect().height;
          let menuWidth = contextMenu.getBoundingClientRect().width;
          //width and height of screen
//innerWidth returns the interior width of the window in pixels
          let width = window.innerWidth;
          let height = window.innerHeight;
          //If user clicks/touches near right corner
          if (width - mouseX <= 200) {
            contextMenu.style.borderRadius = "5px 0 5px 5px";
            contextMenu.style.left = width - menuWidth + "px";
            contextMenu.style.top = mouseY + "px";
            //right bottom
            if (height - mouseY <= 200) {
              contextMenu.style.top = mouseY - menuHeight + "px";
              contextMenu.style.borderRadius = "5px 5px 0 5px";
            }
          }
          //left
          else {
            contextMenu.style.borderRadius = "0 5px 5px 5px";
            contextMenu.style.left = mouseX + "px";
            contextMenu.style.top = mouseY + "px";
            //left bottom
            if (height - mouseY <= 200) {
              contextMenu.style.top = mouseY - menuHeight + "px";
              contextMenu.style.borderRadius = "5px 5px 5px 0";
            }
          }
          //display the menu
          contextMenu.style.visibility = "visible";
        },
        { passive: false }
      );
    });

    //for double tap(works on touch devices)
    document.addEventListener("touchend", function (e) {
      //current time
      var currentTime = new Date().getTime();
      //gap between two gaps
      var tapLength = currentTime - lastTap;
      //clear previous timeouts(if any)
//The clearTimeout() method clears a timer set with the setTimeout() method.
      clearTimeout(timeout);
      //if user taps twice in 500ms
      if (tapLength < 500 && tapLength > 0) {
        //hide menu
        contextMenu.style.visibility = "hidden";
        e.preventDefault();
      } else {
        //timeout if user doesn't tap after 500ms
        timeout = setTimeout(function () {
          clearTimeout(timeout);
        }, 500);
      }
      //lastTap set to current time
      lastTap = currentTime;
    });

    //click outside the menu to close it (for click devices)
    document.addEventListener("click", function (e) {
      if (!contextMenu.contains(e.target)) {
        contextMenu.style.visibility = "hidden";
      }
    });

If you want you can watch the video above to know better how this Custom Right Click (Context Menu) works.

Here I have tried to explain as much as possible. Even then, if you have any problem, you can let us know by commenting.

If you like this JavaScript Custom Right Click Context Menu, please comment.

Top comments (5)

Ben Sinclair • Apr 18 '22

I'd try to discourage people from doing this, because you're changing the way people expect the browser to work, and annoying those who want to do things like save an image, or activate an accessibility feature from their regular context menu. It becomes even more tricky when you try to replicate the same thing on a touch device, where context menus like this will (if they even work) cover most of the user's viewport. It's not a good fit for small screens.