Context Menu

HTML

<div id="contextmenu">
    <item state="gray">Cut</item>
    <item state="gray">Copy</item>
    <item state="gray">Paste</item>
    <hr/>
    <item action="google">Google.com</item>
    <hr/>
    <item action="jquery">jQuery?</item>
</div>

CSS

#contextmenu {
    display: none;
    position: absolute;
    
    /* Style */
    background-color: rgba(235, 230, 235, 0.7);
    border-radius: 5px;
    box-shadow: 0px 0px 5px #888;
}
#contextmenu hr {
    border:1px solid #CCC;
}
item {
    font-family:'Helvetica';
    font-weight: 200;
    font-size: 14px;
    line-height: 16px;
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
}
item:first-child {
    padding-top: 10px;
}
item:last-child {
    padding-bottom: 10px;
}
item[state*="gray"] {
    color: #AAA;
}
item:not([state*="gray"]):hover {
    cursor: pointer;
}
item:not([state*="gray"]):hover {
    color: #FFF;
    background-color: #0099FF;
}
item:not([state*="gray"]):first-child:hover {
    border-radius: 5px 5px 0px 0px;
}
item:not([state*="gray"]):last-child:hover {
    border-radius: 0px 0px 5px 5px;
}

JavaScript

/*=== Context Menu ===*/
window.mouseX = 0;
window.mouseY = 0;

$(document).mousemove(function (e) {
    window.mouseX = e.clientX;
    window.mouseY = e.clientY;
});

$(document).mousemove();

$(document).on('contextmenu', function (e) {
    e.preventDefault();

    if ($("#contextmenu").css("display") == "block") {
        $("#contextmenu").fadeOut(200, function () {
            $("#contextmenu").css({
                display: 'inline-block',
                top: window.mouseY,
                left: window.mouseX
            });
        });
    } else {
        $("#contextmenu").css({
            display: 'inline-block',
            top: window.mouseY,
            left: window.mouseX
        });
    }
});

$(document).click(function (e) {
    $("#contextmenu").fadeOut(200);
});

/*=== Context Menu Functions ===*/

var funcs = {
    "google": function () {
        window.location.href = "//google.com";
    },
    "jquery": function () {
        if (window.jQuery) alert("jQuery is Loaded!");
    }
}

$('item:not([state*="gray"])').click(function (e) {
    if ($(this).attr('action')) {
        var action = $(this).attr('action');
        if (action in funcs) {
            funcs[action]();
        }
    }
});