aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Right Click Context Menu Example | Custom jQuery Right Click Menu

Mar 28, 2013

Here I will explain how to make/ create 
custom jQuery right click context menu example or custom right click menu using jQuery and how to disable right click on the page using JQuery.

In previous posts I explained
change background of controls when validation fails, Change textbox background color in JavaScript, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how to create custom right click context menu using JQuery.

To implement custom right click context menu using jQuery we need to write the code as shown below

<html xmlns="">
<title>Custom Right Click using jQuery</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function() {
try {
$(document).bind("contextmenu", function(e) {
$("#custom-menu").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
$(document).mouseup(function(e) {
var container = $("#custom-menu");
if (container.has( == 0) {
catch (err) {
<style type="text/css">
z-index: 1000;
position: absolute;
border: solid 2px black;
background-color: white;
padding: 5px 0;
display: none;
#custom-menu ol
padding: 0;
margin: 0;
list-style-type: none;
min-width: 130px;
width: auto;
max-width: 200px;
#custom-menu ol li
margin: 0;
display: block;
list-style: none;
padding: 5px 5px;
#custom-menu ol li:hover
background-color: #efefef;

#custom-menu ol li:active
color: White;
background-color: #000;

#custom-menu ol .list-devider
padding: 0px;
margin: 0px;

#custom-menu ol .list-devider hr
margin: 2px 0px;

#custom-menu ol li a
color: Black;
text-decoration: none;
display: block;
padding: 0px 5px;
#custom-menu ol li a:active
color: White;

<div id="custom-menu">
<li><a href="#">Reply</a> </li>
<li><a href="#">Reply All</a> </li>
<li class="list-devider">
<hr />
<li><a href="#">Mark as unread</a> </li>
<li><a href="#">Delete</a> </li>
<li><a href="#">Archive</a> </li>
<li class="list-devider">
<hr />
<li><a href="#">Junk</a> </li>
<li><a href="#">View</a> </li>
Live Demo

To check for live demo try to right click on this webpage

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Mirco said...

Oh ja, dass ist das beste Script, das ich finden konnte, danke daf├╝r! - Perfekt! :-)

Oh yes, thats it! This is the best Script, that i could find, thank you! - Perfect! :-)

bhavesh thumar said...

i think it's amazing dud

vasu said...


Timothy said...

Wonderful task! how to restrict it within iframe??

Anonymous said...

DAt's one of handsome JS i have ever met. Applauses Suresh ji..... and prayers as well...

Anonymous said...

its not working in firefox

Anonymous said...

no its working in firefox too...

dhanu said...


I have requirement of creating mvc web grid with context menu.
The context menu should have capability to View, Add, Edit and Delete operations on each row. This menu should be displayed when I right click on row.
It would be great if you could give some samples of examples.


rohit said...
please tell me how to use right click on gridview to copy gridview row data and paste option and sql server 2005

Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.