Right Click Context Menu

<div class="cm"><div class="fd" tabindex="0"><i class="b"></i><i class="f"></i></div><h5>Right click on me</h5><p>or long-press · Shift + F10</p><ul class="mn" role="menu"><li role="menuitem" data-a="Open">Open<kbd>Enter</kbd></li><li role="menuitem" data-a="Renamed">Rename<kbd>F2</kbd></li><li role="menuitem" data-a="Duplicated">Duplicate<kbd>D</kbd></li><li role="menuitem" data-a="Shared">Share</li><li class="sep"></li><li role="menuitem" class="del" data-a="Deleted">Delete<kbd>Del</kbd></li></ul></div>

.cm{position:relative;width:400px;height:280px;display:grid;place-content:center;justify-items:center;gap:6px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1;user-select:none}.fd{position:relative;width:130px;height:92px;margin-bottom:12px;outline:none;cursor:context-menu;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.fd:hover{transform:translateY(-3px)}.fd:focus-visible{filter:drop-shadow(0 0 0 #fff)}.fd .b{position:absolute;left:4px;top:0;width:58px;height:30px;border-radius:9px 9px 0 0;background:#a77f2a}.fd .f{position:absolute;left:0;right:0;top:14px;bottom:0;border-radius:11px;background:linear-gradient(#c9973f,#bb8730)}.fd .f::after{content:"";position:absolute;left:0;right:0;top:10px;bottom:0;border-radius:11px;background:#d1a246}.cm h5{margin:0;font-size:14px}.cm p{margin:0;font-size:11px;color:#6f7c8c}.mn{position:absolute;left:0;top:0;width:190px;margin:0;padding:5px;list-style:none;border-radius:12px;border:1px solid #2e2e2e;background:#1c1c1c;box-shadow:0 20px 44px rgba(0,0,0,.55);opacity:0;transform:scale(.92);transform-origin:top left;pointer-events:none;transition:opacity .15s,transform .28s cubic-bezier(.3,1.4,.5,1);z-index:9}.mn.open{opacity:1;transform:none;pointer-events:auto}.mn li{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:7px;font-size:12.5px;color:#d8d8d8;cursor:pointer}.mn li.hv,.mn li:hover{background:#2b2b2b;color:#fff}.mn li.del{color:#f87171}.mn li.del.hv,.mn li.del:hover{background:rgba(248,113,113,.14)}.mn kbd{font:10px/1 inherit;color:#707070}.sep{height:1px;margin:4px 6px;background:#2c2c2c;padding:0!important;pointer-events:none}

(function(){var r=document.querySelector('.cm'),m=r.querySelector('.mn'),f=r.querySelector('.fd'),h5=r.querySelector('h5'),it=[].slice.call(m.querySelectorAll('[role=menuitem]')),h=-1,lp;function open(x,y){var b=r.getBoundingClientRect(),s=b.width/400||1;x=(x-b.left)/s;y=(y-b.top)/s;x=Math.max(4,Math.min(400-196,x));y=Math.max(4,Math.min(280-190,y));m.style.left=x+'px';m.style.top=y+'px';m.classList.add('open');h=0;mark()}function close(){m.classList.remove('open');h=-1;mark()}function mark(){it.forEach(function(e,i){e.classList.toggle('hv',i===h)})}function pick(i){h5.textContent=it[i].dataset.a;close()}f.addEventListener('contextmenu',function(e){e.preventDefault();open(e.clientX,e.clientY)});f.addEventListener('pointerdown',function(e){if(e.pointerType==='touch'){lp=setTimeout(function(){open(e.clientX,e.clientY)},500)}});f.addEventListener('pointerup',function(){clearTimeout(lp)});f.addEventListener('keydown',function(e){if(e.key==='F10'&&e.shiftKey||e.key==='ContextMenu'){e.preventDefault();var b=f.getBoundingClientRect();open(b.left+b.width/2,b.top+b.height/2)}});it.forEach(function(e,i){e.onclick=function(){pick(i)};e.onmouseenter=function(){h=i;mark()}});document.addEventListener('keydown',function(e){if(!m.classList.contains('open'))return;if(e.key==='Escape')close();else if(e.key==='ArrowDown'){e.preventDefault();h=(h+1)%it.length;mark()}else if(e.key==='ArrowUp'){e.preventDefault();h=(h+it.length-1)%it.length;mark()}else if(e.key==='Enter'){e.preventDefault();pick(h)}});document.addEventListener('pointerdown',function(e){if(!m.contains(e.target))close()})})();