right-click context menu for multiple links

supressing the right click context menu of the browser and presenting your own

by YordanGeorgiev

HTML

<a id="link-1" href="#" class="cls-context-menu-link">
right click link-01</a>

<a id="link-2" href="#" class="cls-context-menu-link">
right click link-02</a>

<div id="div-context-menu" class="cls-context-menu">
    <ul>
        <li><a href="#to=0">link-to=0 -item-1 </a></li>
        <li><a href="#to=0">link-to=0 -item-2 </a></li>
        <li><a href="#to=0">link-to=0 -item-3 </a></li>
    </ul>
</div>

CSS

.cls-context-menu-link {
    display:block;
    padding:20px;
    background:#ECECEC;
}

.cls-context-menu { position:absolute; display:none; }

.cls-context-menu ul, #context-menu li {
    list-style:none;
    margin:0; padding:0;
    background:white;
}

.cls-context-menu { border:solid 1px #CCC;}
.cls-context-menu li { border-bottom:solid 1px #CCC; }
.cls-context-menu li:last-child { border:none; }
.cls-context-menu li a {
    display:block;
    padding:5px 10px; 
    text-decoration:none;
    color:blue;
}
.cls-context-menu li a:hover {
    background:blue;
    color:#FFF;
}

JavaScript

var rgtClickContextMenu = document.getElementById('div-context-menu');

/** close the right click context menu on click */
document.onclick = function(e){
    rgtClickContextMenu.style.display = 'none';
}

/** 
 present the right click context menu ONLY for the elements having the right class
 
*/
document.oncontextmenu = function(e){
   //alert(e.target.id)
   var elmnt = e.target
   if ( elmnt.className.startsWith ( "cls-context-menu")) {
      e.preventDefault();
      var eid = elmnt.id.replace(/link-/,"")
      rgtClickContextMenu.style.left = e.pageX + 'px'
      rgtClickContextMenu.style.top = e.pageY + 'px'
      rgtClickContextMenu.style.display = 'block'
      var toRepl = "to=" + eid.toString()
      rgtClickContextMenu.innerHTML = rgtClickContextMenu.innerHTML.replace(/to=\d+/g,toRepl)
      //alert(rgtClickContextMenu.innerHTML.toString())
   }
}