JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div id="context">
    <div>
        <a href="#">Copy</a>
        <a href="#">Paste</a>
        <a href="#">Save As...</a>
        <hr>
        <a href="#">Close</a>
    </div>
</div>

CSS

#context {
    display:none;
    position:absolute;
    padding:10px;
}

#context > div {
    border:1px solid #eee;
    box-shadow:2px 2px 3px rgba(0,0,0,0.3);
    padding:4px 0px;
    font-family:Verdana;
}

#context > div > a {
    text-decoration:none;
    color:#666;
    padding:0px 8px;
    display:block;
}

#context > div > a:hover{
    color:#fff;
    background:#4679bd;
}

#context > div > hr {
    margin:4px 0px;
    border:0px;
    border-top:1px solid #eee;
}

JavaScript

$(document).ready(function(){
    $(document).on("contextmenu", function(e){
        e.preventDefault();
        $("#context").css({left: e.pageX-10, top: e.pageY-10}).slideDown("fast");
    });
    $("#context").on("mouseleave", function(e){
        $("#context").slideUp("fast");
    });
    $("#context").on("click", "a", function(e){
        e.preventDefault();
        $("#context").slideUp("fast");
    });
});