JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<header>Right Click Meh</header>

CSS

#menu{
    width:50px;
    height:150px;
    position:absolute;
    width: 120px;
    height: 160px;
    position: absolute;
    display: none;
    z-index: 9999;
    background-color: #444;
    border-radius: 3px;
}



/* Demo Styles...

JavaScript

var context = {
    x: 0,
    y: 0,
    open: function(){
        $('<nav id="menu" />').css({
            top: context.x,
            left: context.y              
        }).prependTo('body').fadeIn();          
    },
    isOpen: function(){
        return $('nav#menu').length==1;      
    },
    close: function(callback){
        $('nav#menu').fadeOut(function(){
            $(this).remove();
            callback();            
        });            
    }
};


$('header').bind('contextmenu',function(e) {
    // check if right button is clicked
    if(e.button === 2) {
        e.preventDefault();
        context.x = e.pageX;
        context.y = e.pageY;
        if(context.isOpen()){
            context.close(context.open);            
        } else { 
            context.open();
        }
    }
});