Context Menu

Customizing context munu on mouse left click

by Kamlesh Gupta

HTML

<ul class='custom-menu'>
  <li data-action = "first">First thing</li>
  <li data-action = "second">Second thing</li>
  <li data-action = "third">Third thing</li>
</ul>

CSS

.custom-menu{
    display:none;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    background:#fff;
    overflow: hidden;
    list-style-type: none;
    border: 1px solid #CCC;
    white-space: nowrap;
    
}
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
}
.custom-menu li:hover {
    background-color: #DEF;
}

JavaScript

// If the document is clicked somewhere
     $(document).on("contextmenu", function(evt)   {evt.preventDefault();});
$(document).bind("mousedown", function (e) {
 
    // If the clicked element is not the menu
    if (e.button==2) {        
  
        event.preventDefault();
        var menuPlacehvr=event.pageY ;
        var menuPlacehhr=event.pageX;
        $(".custom-menu").offset({ top: menuPlacehvr, left: menuPlacehhr });
        $(".custom-menu").css("display","block");
    }
});