Creating a Custom Context Menu in JavaScript

In web development, a context menu is a menu that appears when the user right-clicks on an element in a web page. By default, the browser shows a standard context menu with options such as "Copy", "Paste", "Inspect Element", and "Save Image As

However, it is possible to create a custom context menu using JavaScript. This allows developers to provide additional functionality that is specific to their web application.

To create a custom context menu, you can use the contextmenu event, which is triggered when the user right-clicks on an element. You can then use the event.preventDefault() method to prevent the default context menu from appearing.

Here is an example of how to create a custom context menu in JavaScript

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="context-menu">
      <div class="context-item">Menu-1</div>
      <div class="context-item">Menu-2</div>
      <div class="context-item">Menu-3</div>
      <div class="context-item">Menu-4</div>
      <div class="context-divider"></div>
      <div class="context-item">Menu-5</div>
      <div class="context-item">Menu-6</div>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

css/style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800&display=swap");

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

.context-menu {
  width: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  user-select: none;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  border-radius: 3px;
}

.context-item {
  cursor: pointer;
  padding: 8px 15px;
}
.context-item:hover {
  background-color: #f8f8f8;
}
.context-divider {
  border-bottom: 1px solid #eee;
  margin-top: 10px 0;
}

js/script.js

const context = document.querySelector(".context-menu");

function menu(show = true) {
  context.style.display = show ? "block" : "none";
}

window.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  menu();
  //console.log(e.y, e.x);
  const topPx = e.y + context.offsetHeight > window.innerHeight ? window.innerHeight - context.offsetHeight : e.y;
  const leftPx = e.x + context.offsetWidth > window.innerWidth ? window.innerWidth - context.offsetWidth : e.x;
  context.style.top = topPx + "px";
  context.style.left = leftPx + "px";
});

window.addEventListener("click", () => {
  menu(false);
});

This code creates a custom context menu in JavaScript. Here is an explanation of how it works:

The first line selects the HTML element with the class "context-menu" and assigns it to a variable called context.
The menu function takes a boolean parameter called show, which determines whether to show or hide the context menu. It sets the display property of the context element to "block" if show is true, and "none" if show is false.
The code adds an event listener to the window object for the contextmenu event. This event is triggered when the user right-clicks on the webpage. The event listener prevents the default context menu from appearing using e.preventDefault(), and then calls the menu function to show the custom context menu. It also calculates the position of the context menu based on the mouse click coordinates using e.y and e.x.
Finally, the code adds an event listener to the window object for the click event. This event is triggered when the user clicks anywhere on the webpage. The event listener calls the menu function with false as the parameter to hide the custom context menu.
In summary, this code creates a custom context menu that appears when the user right-clicks on the webpage, and disappears when the user clicks anywhere on the webpage. The position of the context menu is calculated based on the mouse click coordinates, and it is displayed or hidden using the menu function.

Output

Live Preview

Overall, dependent select boxes in JavaScript are a powerful and useful feature for web forms that can greatly enhance the user experience by reducing the number of options displayed to the user at a time and allowing for more precise selection based on previous choices.