Custom Right Click
HTML
<div class="_custom_contextmenu" style="display:none;" >
<div class="context_elm" >
Undo
<div class="right" >
Ctrl+Z
</div></div>
<div class="context_elm" >
Redo<div class="right" >
Ctrl+Shift+Z
</div></div>
<div class="context_elm" >
Cut<div class="right" >
Ctrl+X
</div></div>
<div class="context_elm" >
Reload<div class="right" >
Ctrl+R
</div></div>
<div class="context_elm" >
Inspect<div class="right" >
Ctrl+Shift+I
</div></div>
</div>
CSS
._custom_contextmenu{
display:none;
position:absolute;
font-family:monospace;
left:0;
top:0;
width:200px;
height:auto;
opacity:0;
border-radius:4px;
padding:1px;
box-sizing:border-box;
box-shadow:0 2px 5px #111;
background-color:#444;
transition:opacity 0.1s ease-in-out;
}
._custom_contextmenu > .context_elm{
display:block;
width:100%;
clear:both;
padding:10px;
box-sizing:border-box;
background-color:#444;
color:#eee;
cursor:pointer;
transition:background-color 0.3s ease-in-out;
}
._custom_contextmenu > .context_elm:hover{
background-color:#222;
}
._custom_contextmenu > .context_elm > .right{
float:right;
font-size:12px;
color:#444;
font-family:arial;
}
JAVASCRIPT
var cm = document.getElementsByClassName("_custom_contextmenu")[0],s;
window.oncontextmenu = function(e){
cm.className = "_custom_contextmenu visible";
_toggleCustomCMenu(e);
return false;
}
document.onmouseup = function(e){
if( e.target.parentNode !== cm ){
cm.className = "_custom_contextmenu";
hide();
}
}
function show(){
cm.style.display = "block";
s = setTimeout(function(){
cm.style.opacity = 1;
},100);
}
function hide(){
cm.style.opacity = 0;
s = setTimeout(function(){
cm.style.display = "none";
},100);
}
function _toggleCustomCMenu(e){
clearTimeout(s);
if( cm.className ==
"_custom_contextmenu visible" ){
cm.style.left = e.clientX + 2 + "px";
cm.style.top = e.clientY + 2 +"px";
show();
}else{
hide();
}
}
