HomeJavascriptCustom Right Click Context Menu | Javascript

Custom Right Click Context Menu | Javascript

Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a custom right-click menu. To build this context menu, we need HTML, CSS and Javascript.

This context menu works for mouse devices as well as for touch screens. For devices with a mouse click, the menu opens when the user right-clicks anywhere on the screen. When the user left-clicks anywhere outside the menu, the menu closes.For touch devices, the menu opens when the user taps on the screen and closes on double-tap.

If you would like to check out some creative menu designs and effects, you can check out this collection here. This collection comprises video tutorials from my youtube channel.

Video Tutorial:

If you are interested in coding along with me, you can watch the video version of this tutorial down below. I post news and exciting tutorials on my youtube channel every alternate day. Be sure to subscribe to my channel, so you don’t miss any of these fun tutorials.

Project Folder Structure:

Before we start to code, let us first create the project folder structure. We call the project folder – Custom Context Menu. Inside this menu, we have three files – index.html, style.css and script.js. These files are the HTML document, the stylesheet and the script file, respectively. Let us begin to code.

HTML:

We start with the HTML code. Now, copy the code provided below and paste it into your HTML section.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Context Menu</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="context-menu">
      <div class="item">Menu Item 1</div>
      <div class="item">Menu Item 2</div>
      <div class="item">Menu Item 3</div>
      <div class="item">Menu Item 4</div>
      <div class="item">Menu Item 5</div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style the menu. To style the menu, we use CSS. Do copy the code below and paste it into your stylesheet.

Other Tutorial You Might Like:

 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #2c8df7;
}
#context-menu {
  background-color: #ffffff;
  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:

Finally, we add functionality to this context menu. To add this functionality, we use Javascript. Do copy the code below and paste it into your script file.

//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
events.forEach((eventType) => {
  document.addEventListener(
    eventType,
    (e) => {
      e.preventDefault();
      //x and y position of mouse or touch
      let mouseX = e.clientX || e.touches[0].clientX;
      let mouseY = e.clientY || e.touches[0].clientY;
      //height and width of menu
      let menuHeight = contextMenu.getBoundingClientRect().height;
      let menuWidth = contextMenu.getBoundingClientRect().width;
      //width and height of screen
      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)
  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";
  }
});

Your custom right-clicks context menu is now ready. If you have any problems while creating this project, you download the source code to fix those errors. To download the source code, simply click on the download code button below. Also, I would love to hear any ideas, suggestions and feedback from you. So feel free to drop them in the comments below.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

14 + 7 =

Most Popular