Here is the small tutorial for you.

Step 1 :-

Write the HTML coding of your page.

<script src="jquery.js" type="text/javascript"> </script>

<script type="text/javascript">// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
 //our code here
// ]]></script>

<!-- -->

Step 2 :-

Lets Give our page some style.

# mask {
position:absolute; left:0;
top:0; z-index:9000;
display:block;    }

# myMenu{
position:absolute; display:none;
z-index:9999; background:yellow;
border:1px solid; width:200px;
height:155px;   }

# textbox{
background:orange; width:380px;
border:2px solid; }

img { height:30px; width:30px; }

td{ font-size:20px; cursor:pointer; }

a{ text-decoration:none; color:black; }

a:hover{ color:white; background:black; }

Step 3 :-

Time to write our jQuery code. But first lets revise our main concept for this code.

Our concept :- On Right Click , Show a Menu. If clicked anywhere else on the page other than our Menu then Hide the Menu.

In short we will give a mask behind the Menu, so if user clicks the mask (i.e anywhere other than menu) the menu will hide.

<script type="text/javascript">// < ![CDATA[
// < ![CDATA[

//Create two variables to grab the height and width of current document.

var windowwidth;

var windowheight;

$(document).ready(function(){

$('#myMenu').hide(); //Hiding our menu initially

$('#textbox').bind("contextmenu",function(e){  //if user right clicks over the div

windowwidth = $(window).width(); //grab the windows width

windowheight = $(window).height();  // grab the windows height

$('#mask').css({   //giving height and width to mask

'height': windowheight,

'width': windowwidth

});

$('#myMenu').show(500);  // show the Menu

$('#myMenu').css({ //giving menu the position where the mouse right button is clicked. More explanation below.

'top': e.pageY+'px',  // the top will be equal to the Y of the page

'left': e.pageX+'px'  // the left will be equal to the X of the page

});

return false; // to hide the original right click menu

});

$('#mask').click(function(){ //now if somebody clicks LEFT mouse button over the MASK, i.e any location other than inside the MENU

$(this).height(0); //height of mask is zero now

$(this).width(0); // width of mask is zero now

$('#myMenu').hide(500); //its time to hide our menu

return false;

});

$('#mask').bind("contextmenu",function(){ //now if somebody clicks RIGHT  mouse button over the MASK, i.e any location other than inside the MENU

$(this).height(0); //height of mask is zero now

$(this).width(0); // width of mask is zero now

$('#myMenu').hide(500);  //its time to hide our menu

return false;

});

});

// ]]></script>

Our code will work now successfully. But did you notice something? NO? ok.. try to resize your browser. Did you noticed the mask? If NOT, try giving mask a background color.

You will notice that if windows resize’s, the mask is still with the height and width of old windows size. Well this is a common mistake.

This means, if we resize the window but our mask is with same height and width, so if user will click the extra space that came after the browser is resized. Our menu will not HIDE.

Lets correct this.

At the start add another variable,

<script type="text/javascript">// < ![CDATA[
// < ![CDATA[

//Create two variables to  grab the height and width of current document.

var windowwidth;

var  windowheight;

var checkmenu;

When user Right clicks over your menu definable area. Pass a value to this variable, checkmenu.

$('#textbox').bind("contextmenu",function(e){

windowwidth = $(window).width();

windowheight = $(window).height();

checkmenu = 1;

Add some more code for windows resizing, before the end of our code.

$(window).resize(function(){

if(checkmenu == 1) {

windowwidth = $(window).width();

windowheight = $(window).height();

$('#mask').css({

'height': windowheight,

'width': windowwidth,

});    }   });  });

// ]]></script>

But there is one more mistake, you can check yourself by running the code.

The mistake is :- Our variable ‘checkmenu ‘ is always with the value of 1 , therefore our mask will never hide. As we have given some css in our last lines for if(checkmenu ==1)

To correct this, lets pass our value checkmenu = 0; , when user right clicks or left clicks the mask.

$('#mask').click(function(){

$(this).height(0);

$(this).width(0);

$('#myMenu').hide(500);

checkmenu = 0; // Now everything will be perfect

return false;
});

Thats all! The article source:http://hiteshjoshi.com/tutorials/javascript/jquery/nice-jquery-right-click-menu.html