Creating right click with the help of jquery is real easy and can be implemented very quickly. While trying for my one of the project , I made one and sharing it today.

.

Why not to check DEMO before moving on.

.

Step 1: Creating HTML

Simply copy and paste the html next to the div to be right clicked. In this example we have ( id=”rightclickarea” )

<div id="rightclickarea">Right click inside bordered container</div> <div class="vmenu"> <div class="first_li"><span>Open</span></div> <div class="first_li"><span>Open in new tab</span></div> <div class="sep_li"></div> <div class="first_li"><span>Quick Preview</span> <div class="inner_li"> <span>Dossier</span> <span>Channel 1</span> <span>Channel 2</span> </div> </div> <div class="first_li"><span>Preview</span> <div class="inner_li"> <span>Channel 1</span> <span>Channel 2 </span> </div> </div> <div class="first_li"><span>Edit</span></div> <div class="first_li"><span>Event Log</span></div> <div class="sep_li"></div> <div class="first_li"><span>New</span></div> <div class="first_li"><span>Assignments</span> <div class="inner_li"> <span>Assignement 1</span> <span>Assignement 2</span> </div> </div> <div class="first_li"><span>Assets</span> <div class="inner_li"> <span>Asset 1</span> <span>Asset 2</span> <span>All Assets</span> </div> </div> <div class="first_li"><span>Preview</span></div> <div class="sep_li"></div> <div class="first_li"><span>Move to</span> <div class="inner_li"> <span>Folder name</span> </div> </div> <div class="first_li"><span>Others</span> <div class="inner_li"> <span>Mark as Read</span> <span>Mark as Unread</span> <span>Trash</span> <span>Archieve</span> <span>Commite</span> <span>Release</span> </div> </div> </div>

.

Step 2: Add Style to stylesheet

Now add following css to your stylesheet:

.vmenu { border : 1px solid #aaa ; position : absolute ; background : #fff ; display : none ; font-size : 0.75em ; } .vmenu .first_li span { width : 100px ; display : block ; padding : 5px 10px ; cursor : pointer } .vmenu .inner_li { display : none ; margin-left : 120px ; position : absolute ; border : 1px solid #aaa ; border-left : 1px solid #ccc ; margin-top : -28px ; background : #fff ; } .vmenu .sep_li { border-top : 1px ridge #aaa ; margin : 5px 0 } .vmenu .fill_title { font-size : 11px ; font-weight : bold ; / height : 15px ; / overflow : hidden ; word-wrap : break-word ; }

.

Step 3: Add Jquery script

And finally , add following lines just inside head tag of your HTML:

< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ script > < script type = "text/javascript" > $ ( document ) . ready ( function ( ) { $ ( & #039 ; #rightclickarea & #039 ; ) . bind ( & #039 ; contextmenu & #039 ;, function ( e ) { var $cmenu = $ ( this ) . next ( ) ; $ ( & #039 ;< div class = "overlay" ></ div >& #039 ; ) . css ( { left : & #039 ; 0px & #039 ;, top : & #039 ; 0px & #039 ;, position : & #039 ; absolute & #039 ;, width : & #039 ; 100 %& #039 ;, height : & #039 ; 100 %& #039 ;, zIndex : & #039 ; 100 & #039 ; } ) . click ( function ( ) { $ ( this ) . remove ( ) ; $cmenu. hide ( ) ; } ) . bind ( & #039 ; contextmenu & #039 ; , function ( ) { return false ; } ) . appendTo ( document. body ) ; $ ( this ) . next ( ) . css ( { left : e. pageX , top : e. pageY , zIndex : & #039 ; 101 & #039 ; } ) . show ( ) ; return false ; } ) ; $ ( & #039 ; . vmenu . first_li & #039 ; ) . live ( & #039 ; click & #039 ;, function ( ) { if ( $ ( this ) . children ( ) . size ( ) == 1 ) { alert ( $ ( this ) . children ( ) . text ( ) ) ; $ ( & #039 ; . vmenu & #039 ; ) . hide ( ) ; $ ( & #039 ; . overlay & #039 ; ) . hide ( ) ; } } ) ; $ ( & #039 ; . vmenu . inner_li span & #039 ; ) . live ( & #039 ; click & #039 ;, function ( ) { alert ( $ ( this ) . text ( ) ) ; $ ( & #039 ; . vmenu & #039 ; ) . hide ( ) ; $ ( & #039 ; . overlay & #039 ; ) . hide ( ) ; } ) ; $ ( ".first_li , .sec_li, .inner_li span" ) . hover ( function ( ) { $ ( this ) . css ( { backgroundColor : & #039 ; #E0EDFE & #039 ; , cursor : & #039 ; pointer & #039 ; } ) ; if ( $ ( this ) . children ( ) . size ( ) > 0 ) $ ( this ) . find ( & #039 ; . inner_li & #039 ; ) . show ( ) ; $ ( this ) . css ( { cursor : & #039 ; default & #039 ; } ) ; } , function ( ) { $ ( this ) . css ( & #039 ; background - color & #039 ; , & #039 ; #fff & #039 ; ) ; $ ( this ) . find ( & #039 ; . inner_li & #039 ; ) . hide ( ) ; } ) ; } ) ; </ script >

.

Here is DEMO

.

That's all!

Cheers!!