<div class="container" oncontextmenu="return showContextMenu(event)">
<h2>Right Click Here!</h2>
</div>
<div id="pulse"></div>
<div id="contextMenu">
<ul>
<li>
<i class="fa fa-folder-open-o" aria-hidden="true"></i>
<div class="name">Open</div>
</li>
<li class="disabled">
<i></i>
<div class="name">Open in new tab</div>
</li>
<div class="break"></div>
<li>
<i class="fa fa-scissors" aria-hidden="true"></i>
<div class="name">Cut</div>
</li>
<li>
<i class="fa fa-clone" aria-hidden="true"></i>
<div class="name">Copy</div>
</li>
<li>
<i class="fa fa-clipboard" aria-hidden="true"></i>
<div class="name">Paste</div>
</li>
<div class="break"></div>
<li>
<i class="fa fa-refresh" aria-hidden="true"></i>
<div class="name">Reload</div>
</li>
<li>
<i class="fa fa-paint-brush" aria-hidden="true"></i>
<div class="name">Print</div>
</li>
<div class="break"></div>
<li class="share">
<div class="name">Share</div>
<div class="icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-pinterest"></i>
</div>
</li>
</ul>
</div>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
* {
margin:0px;
padding:0px;
box-sizing:border-box;
font-family: 'Roboto Condensed', sans-serif;
}
body {
}
.container {
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
font-size:200%;
}
ul li {
list-style:none;
}
#contextMenu {
position:absolute;
transform-origin:top left;
transform:scale(0);
width:220px;
border:1px solid rgba(100,100,100,0.55);
padding:5px;
background:rgba(250,250,250,0.98);
box-shadow:2px 2px 12px 4px rgba(100,100,100,0.4);
transition:transform 400ms ease-in-out 50ms;
}
#contextMenu.visible {
transform:scale(1);
}
#contextMenu ul li {
padding:5px 3px;
display:flex;
align-items:center;
cursor:pointer;
color:rgba(50,50,50,0.9);
font-size:15px;
}
#contextMenu ul li:hover {
background:rgba(100,100,100,0.12);
}
#contextMenu ul li.disabled {
color:rgba(100,100,100,0.5);
cursor:pointer;
}
#contextMenu ul li.share {
/* height:40px; */
width:100%;
flex-direction:column;
align-items:left;
flex-wrap:wrap;
}
#contextMenu ul li.share > .name {
margin-top:-2px;
margin-bottom:10px;
display:block;
}
#contextMenu ul li.share .icons {
width:100%;
display:flex;
justify-content:space-around;
}
#contextMenu ul li.share .icons > i:hover{
background:#e7e7e7;
}
#contextMenu ul li i {
width:20px;
}
#contextMenu ul li div.name {
padding-left:8px;
}
#contextMenu div.break {
margin:4px 0px;
border-top:1px solid rgba(100,100,100,0.5);
}
#pulse {
position:fixed;
width:35px;
height:35px;
background:rgba(0,0,0,1);
opacity:0;
border-radius:50%;
z-index:100;
}
#pulse.active {
animation:pulse 400ms ease;
}
@keyframes pulse {
0% {
opacity:1;
transform:scale(0);
}
100% {
opacity:0;
transform:scale(1.1);
}
}
window.addEventListener('click',function(e){
var menu = document.getElementById('contextMenu');
menu.classList.remove('visible');
});
function showContextMenu(e) {
var pulse = document.getElementById('pulse');
var menu = document.getElementById('contextMenu');
if(e.clientX > window.innerWidth- 220) {
menu.style.left = (e.clientX-220)+'px';
menu.style.transformOrigin = 'top right';
} else {
menu.style.left = e.clientX+'px';
}
pulse.style.left = e.clientX-10+'px';
menu.style.top = e.clientY+'px';
pulse.style.top = (e.clientY-10)+'px';
pulse.classList.add('active');
setTimeout(function(){
document.getElementById('pulse').classList.remove('active');
},300);
document.getElementById('contextMenu')
menu.classList.add('visible');
menu.style.transformOrigin = 'top left';
return false;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.