<!-- ----------------- 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>
/* ----------------- 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);
}

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";
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.