Custom Context or Right Click Menu Design using HTML, CSS, and Javascript
Tags: html, javascript, css, incoder
Published: 2022-02-19 17:06:44

Hello readers, today in this blog you'll learn how to create custom context or right-click menu design using HTML, CSS, and Javascript. In our previous blog, we saw [how to create an awesome calculator design using HTML, CSS, and Javascript](https://incoderweb.blogspot.com/2022/02/awesome-calculator-design-using-html.html). Now it's time to create a custom right-click menu. I've also shared many projects related to Javascript. Don't forget to check [here](https://incoderweb.blogspot.com/search/label/Javascript).

The context menu is a menu used in a graphical user interface. That appears upon user interaction, such right-click operation menu. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application to which the menu belongs.

In this design [Custom Context or Right Click Menu Design] we have a menu. It triggers when the user right-clicks in anywhere on the page. This is a very simple and beautiful design as you can see in the image above. If you're unable to understand what am I trying to say So you can check the source code and preview as well.

Preview is available [here](https://incoderweb.blogspot.com/2022/02/custom-context-or-right-click-menu.html).

##Source Code [Custom Context or Right Click Menu]

#HTML Code

```
<!-- ----------------- Created By InCoder ----------------- -->
<!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>Custom Right Click Menu - InCoder</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head>

<body>
  <div class="inMenu">
    <ul class="menuItems">
      <li><i class="fa-solid fa-arrow-left"></i>Back</li>
      <li><i class="fa-solid fa-arrow-rotate-left"></i>Reload</li>
      <li><i class="fa-solid fa-copy"></i>Copy</li>
      <li><i class="fa-solid fa-clipboard"></i>Paste</li>
      <div class="dropdown">
        <li><i class="fa-solid fa-folder-plus"></i>New <i class="fa-solid fa-angle-right"></i></li>
        <div class="dropdownBox">
          <li><i class="fa-solid fa-folder-plus"></i>New Folder</li>
          <li><i class="fa-solid fa-file-arrow-up"></i>Upload File</li>
          <li><i class="fa-solid fa-floppy-disk"></i>Save as File</li>
        </div>
      </div>
      <li><i class="fa-solid fa-magnifying-glass"></i>Search</li>
    </ul>
  </div>
</body>

</html>
```

##CSS Code

```
/* ----------------- Created By InCoder ----------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

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

body {
  height: 100vh;
  background: #f5275f;
}

.inMenu {
  display: none;
  max-width: 13rem;
  width: 13rem;
  position: absolute;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.3);
}

.inMenu .menuItems li {
  margin: 6px 0;
  display: flex;
  font-size: 18px;
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  align-items: center;
}

.inMenu .menuItems li:first-child {
  margin-top: 0;
}

.inMenu .menuItems li:last-child {
  margin-bottom: 0;
}

.dropdown {
  position: relative;
}

.inMenu .fa-angle-right {
  position: absolute;
  right: 0.8rem;
}

.inMenu .menuItems li i {
  font-size: 20px;
  padding: 0px 10px;
}

.inMenu .menuItems li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dropdownBox {
  top: 0;
  opacity: 0;
  right: -8%;
  max-width: 13rem;
  position: absolute;
  transition: all 0.4s;
  border-radius: 0.5rem;
  background-color: #fff;
  transform: translateX(-10px);
}

.dropdown:hover .dropdownBox {
  opacity: 1;
  transform: translateX(0px);
}
```

##Javascript Code

```
let rightMenu = document.querySelector(".inMenu"),
  newMenu = rightMenu.querySelector(".dropdownBox");

document.addEventListener("contextmenu", (e) => {
  e.preventDefault();

  let x = e.offsetX,
    y = e.offsetY,
    winWidth = window.innerWidth,
    winHeight = window.innerHeight,
    cmWidth = rightMenu.offsetWidth,
    cmHeight = rightMenu.offsetHeight;

  if (x > winWidth - cmWidth - newMenu.offsetWidth) {
    newMenu.style.left = "-102%";
  } else {
    newMenu.style.left = "";
    newMenu.style.right = "-83%";
  }

  x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
  y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;

  rightMenu.style.left = `${x}px`;
  rightMenu.style.top = `${y}px`;
  rightMenu.style.display = "block";
});

document.body.addEventListener("click", function (e) {
  if (!rightMenu.contains(e.target)) {
    rightMenu.style.display = "none";
  }
});
```