<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");
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.