Code showing Right Click Menu using JavaScript & jQuery
<!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <style type="text/css"> #right_items{ list-style: none; margin: 0px; margin-top: 4px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px; font-size: 14px; color: #333333; } .right_hr hr { background-color: #f4f4f4; border-color: #f4f4f4; color: #f4f4f4; } #right_ctr{ display: none; position: fixed; border: 1px solid #b2b2b2; width: 150px; background: #f9f9f9; box-shadow: 3px 3px 2px #e9e9e9; border-radius: 4px; font-family: arial; } li { padding: 3px; padding-left: 10px; } #right_items :hover{ color: white; background: #0000ff; border-radius: 2px; } </style> <script type="text/javascript"> $(document).bind("contextmenu",function(e){ e.preventDefault(); $("#right_ctr").css("left",e.pageX); $("#right_ctr").css("top",e.pageY); $("#right_ctr").fadeIn(200,startFocusOut()); }); function startFocusOut(){ $(document).on("click",function(){ $("#right_ctr").hide(); $(document).off("click"); }); } $("#right_items > li").click(function(){ $("#op").text("You have selected "+$(this).text()); }); </script> </head> <body> <p>Right Click Menu</p> <div id='right_ctr'> <ul id='right_items'> <li>Copy</li> <li>Paste</li> <li>Delete</li> </ul> <hr class="right_hr" /> <ul id="right_items"> <li>Select All</li> </ul> <hr class="right_hr" /> <ul id='right_items'> <li>Send to Back</li> <li>Bring to Front</li> </ul> </div> </body> </html>