<div id="context-menu-01" class="context-menu">
  <div class="context-menu-item">Cut</div>
  <div class="context-menu-item">Copy</div>
  <div class="context-menu-item">Paste</div>
</div>
body {
  margin: 0;
  background: #1874C1;
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
}

.context-menu {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 75%);
  border-radius: 4px;
  padding: 8px;
  min-width: calc(119px - 16px);
  box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.15);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: 250ms ease;
  transition-property: opacity, transform;
}

.context-insta-close {
  opacity: 0 !important;
  transition: none !important;
}

.context-open {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: all;
}

.context-menu-item {
  font-family: Roboto;
  position: relative;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  color: black;
  padding: 4px;
  border-radius: 4px;
  transition: 200ms ease;
  margin-bottom: 2px;
}

.context-menu-item::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 250ms ease;
  background: linear-gradient(103.12deg, #2196f3 0%, #83cdf6 65.62%);
  content: "";
  border-radius: 4px;
  z-index: -1;
}

.context-menu-item:hover {
  color: white;
  cursor: pointer;
  z-index: 5;
}

.context-menu-item:hover::before {
  opacity: 1;
}
// handle the event
if (document.addEventListener) {
  document.addEventListener(
    "contextmenu",
    function (e) {
      toggleContextMenu("context-menu-01", e);
      e.preventDefault();
    },
    false
  );
} else {
  document.attachEvent("oncontextmenu", function () {
    toggleContextMenu("context-menu-01", e);
    window.event.returnValue = false;
  });
}

// toggle the menu
function toggleContextMenu(id, e) {
  let menu = document.getElementById(id);

  // let's show it
  if (menu.classList.contains("context-open")) {
    // close
    menu.classList.add("context-insta-close");
    menu.classList.remove("context-open");
    menu.classList.remove("context-insta-close");
  } else {
    menu.style.left = e.pageX + 8 + "px";
    menu.style.top = e.pageY + 8 + "px";
    menu.classList.add("context-open");
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.