I've a few websites like google-docs and map-quest that have custom drop down menus when you right-click. Somehow they override the browser's behavior of drop-down menu, and I'm now sure exactly how they do it. I found a jQuery plugin that does this, but I'm still curious about a few things:
- How does this work? Is the browser's drop-down menu actually being overridden, or is the effect just simulated? If so, how?
- What does the plugin abstract away? What's going on behind the scenes?
- Is this the only way of achieving this effect?
This question is related to
javascript
jquery
jquery-plugins
contextmenu
right-click
The answer is
here is an example for right click context menu in javascript: Right Click Context Menu
Used raw javasScript Code for context menu functionality. Can you please check this, hope this will help you.
Live Code:
_x000D_
_x000D_
_x000D_
_x000D_
(function() {_x000D_
_x000D_
"use strict";_x000D_
_x000D_
_x000D_
/*********************************************** Context Menu Function Only ********************************/_x000D_
function clickInsideElement( e, className ) {_x000D_
var el = e.srcElement || e.target;_x000D_
if ( el.classList.contains(className) ) {_x000D_
return el;_x000D_
} else {_x000D_
while ( el = el.parentNode ) {_x000D_
if ( el.classList && el.classList.contains(className) ) {_x000D_
return el;_x000D_
}_x000D_
}_x000D_
}_x000D_
return false;_x000D_
}_x000D_
_x000D_
function getPosition(e) {_x000D_
var posx = 0, posy = 0;_x000D_
if (!e) var e = window.event;_x000D_
if (e.pageX || e.pageY) {_x000D_
posx = e.pageX;_x000D_
posy = e.pageY;_x000D_
} else if (e.clientX || e.clientY) {_x000D_
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;_x000D_
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;_x000D_
}_x000D_
return {_x000D_
x: posx,_x000D_
y: posy_x000D_
}_x000D_
}_x000D_
_x000D_
// Your Menu Class Name_x000D_
var taskItemClassName = "thumb";_x000D_
var contextMenuClassName = "context-menu",contextMenuItemClassName = "context-menu__item",contextMenuLinkClassName = "context-menu__link", contextMenuActive = "context-menu--active";_x000D_
var taskItemInContext, clickCoords, clickCoordsX, clickCoordsY, menu = document.querySelector("#context-menu"), menuItems = menu.querySelectorAll(".context-menu__item");_x000D_
var menuState = 0, menuWidth, menuHeight, menuPosition, menuPositionX, menuPositionY, windowWidth, windowHeight;_x000D_
_x000D_
function initMenuFunction() {_x000D_
contextListener();_x000D_
clickListener();_x000D_
keyupListener();_x000D_
resizeListener();_x000D_
}_x000D_
_x000D_
/**_x000D_
* Listens for contextmenu events._x000D_
*/_x000D_
function contextListener() {_x000D_
document.addEventListener( "contextmenu", function(e) {_x000D_
taskItemInContext = clickInsideElement( e, taskItemClassName );_x000D_
_x000D_
if ( taskItemInContext ) {_x000D_
e.preventDefault();_x000D_
toggleMenuOn();_x000D_
positionMenu(e);_x000D_
} else {_x000D_
taskItemInContext = null;_x000D_
toggleMenuOff();_x000D_
}_x000D_
});_x000D_
}_x000D_
_x000D_
/**_x000D_
* Listens for click events._x000D_
*/_x000D_
function clickListener() {_x000D_
document.addEventListener( "click", function(e) {_x000D_
var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName );_x000D_
_x000D_
if ( clickeElIsLink ) {_x000D_
e.preventDefault();_x000D_
menuItemListener( clickeElIsLink );_x000D_
} else {_x000D_
var button = e.which || e.button;_x000D_
if ( button === 1 ) {_x000D_
toggleMenuOff();_x000D_
}_x000D_
}_x000D_
});_x000D_
}_x000D_
_x000D_
/**_x000D_
* Listens for keyup events._x000D_
*/_x000D_
function keyupListener() {_x000D_
window.onkeyup = function(e) {_x000D_
if ( e.keyCode === 27 ) {_x000D_
toggleMenuOff();_x000D_
}_x000D_
}_x000D_
}_x000D_
_x000D_
/**_x000D_
* Window resize event listener_x000D_
*/_x000D_
function resizeListener() {_x000D_
window.onresize = function(e) {_x000D_
toggleMenuOff();_x000D_
};_x000D_
}_x000D_
_x000D_
/**_x000D_
* Turns the custom context menu on._x000D_
*/_x000D_
function toggleMenuOn() {_x000D_
if ( menuState !== 1 ) {_x000D_
menuState = 1;_x000D_
menu.classList.add( contextMenuActive );_x000D_
}_x000D_
}_x000D_
_x000D_
/**_x000D_
* Turns the custom context menu off._x000D_
*/_x000D_
function toggleMenuOff() {_x000D_
if ( menuState !== 0 ) {_x000D_
menuState = 0;_x000D_
menu.classList.remove( contextMenuActive );_x000D_
}_x000D_
}_x000D_
_x000D_
function positionMenu(e) {_x000D_
clickCoords = getPosition(e);_x000D_
clickCoordsX = clickCoords.x;_x000D_
clickCoordsY = clickCoords.y;_x000D_
menuWidth = menu.offsetWidth + 4;_x000D_
menuHeight = menu.offsetHeight + 4;_x000D_
_x000D_
windowWidth = window.innerWidth;_x000D_
windowHeight = window.innerHeight;_x000D_
_x000D_
if ( (windowWidth - clickCoordsX) < menuWidth ) {_x000D_
menu.style.left = (windowWidth - menuWidth)-0 + "px";_x000D_
} else {_x000D_
menu.style.left = clickCoordsX-0 + "px";_x000D_
}_x000D_
_x000D_
// menu.style.top = clickCoordsY + "px";_x000D_
_x000D_
if ( Math.abs(windowHeight - clickCoordsY) < menuHeight ) {_x000D_
menu.style.top = (windowHeight - menuHeight)-0 + "px";_x000D_
} else {_x000D_
menu.style.top = clickCoordsY-0 + "px";_x000D_
}_x000D_
}_x000D_
_x000D_
_x000D_
function menuItemListener( link ) {_x000D_
var menuSelectedPhotoId = taskItemInContext.getAttribute("data-id");_x000D_
console.log('Your Selected Photo: '+menuSelectedPhotoId)_x000D_
var moveToAlbumSelectedId = link.getAttribute("data-action");_x000D_
if(moveToAlbumSelectedId == 'remove'){_x000D_
console.log('You Clicked the remove button')_x000D_
}else if(moveToAlbumSelectedId && moveToAlbumSelectedId.length > 7){_x000D_
console.log('Clicked Album Name: '+moveToAlbumSelectedId);_x000D_
}_x000D_
toggleMenuOff();_x000D_
}_x000D_
initMenuFunction();_x000D_
_x000D_
})();/* For Body Padding and content */_x000D_
body { padding-top: 70px; }_x000D_
li a { text-decoration: none !important; }_x000D_
_x000D_
/* Thumbnail only */_x000D_
.thumb {_x000D_
margin-bottom: 30px;_x000D_
}_x000D_
.thumb:hover a, .thumb:active a, .thumb:focus a {_x000D_
border: 1px solid purple;_x000D_
}_x000D_
_x000D_
/************** For Context menu ***********/_x000D_
/* context menu */_x000D_
.context-menu { display: none; position: absolute; z-index: 9999; padding: 12px 0; width: 200px; background-color: #fff; border: solid 1px #dfdfdf; box-shadow: 1px 1px 2px #cfcfcf; }_x000D_
.context-menu--active { display: block; }_x000D_
_x000D_
.context-menu__items { list-style: none; margin: 0; padding: 0; }_x000D_
.context-menu__item { display: block; margin-bottom: 4px; }_x000D_
.context-menu__item:last-child { margin-bottom: 0; }_x000D_
.context-menu__link { display: block; padding: 4px 12px; color: #0066aa; text-decoration: none; }_x000D_
.context-menu__link:hover { color: #fff; background-color: #0066aa; }_x000D_
.context-menu__items ul { position: absolute; white-space: nowrap; z-index: 1; left: -99999em;}_x000D_
.context-menu__items > li:hover > ul { left: auto; padding-top: 5px ; min-width: 100%; }_x000D_
.context-menu__items > li li ul { border-left:1px solid #fff;}_x000D_
.context-menu__items > li li:hover > ul { left: 100%; top: -1px; }_x000D_
.context-menu__item ul { background-color: #ffffff; padding: 7px 11px; list-style-type: none; text-decoration: none; margin-left: 40px; }_x000D_
.page-media .context-menu__items ul li { display: block; }_x000D_
/************** For Context menu ***********/<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<body>_x000D_
_x000D_
_x000D_
_x000D_
<!-- Page Content -->_x000D_
<div class="container">_x000D_
_x000D_
<div class="row">_x000D_
_x000D_
<div class="col-lg-12">_x000D_
<h1 class="page-header">Thumbnail Gallery <small>(Right click to see the context menu)</small></h1>_x000D_
</div>_x000D_
_x000D_
<div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
<a class="thumbnail" href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
</a>_x000D_
</div>_x000D_
<div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
<a class="thumbnail" href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
</a>_x000D_
</div>_x000D_
<div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
<a class="thumbnail" href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
</a>_x000D_
</div>_x000D_
<div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
<a class="thumbnail" href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
</a>_x000D_
</div>_x000D_
<div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
<a class="thumbnail" href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
</a>_x000D_
</div>_x000D_
<div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
<a class="thumbnail" href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
</a>_x000D_
</div>_x000D_
<div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
<a class="thumbnail" href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
</a>_x000D_
</div>_x000D_
<div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
<a class="thumbnail" href="#">_x000D_
<img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
</a>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
<hr>_x000D_
_x000D_
_x000D_
</div>_x000D_
<!-- /.container -->_x000D_
_x000D_
_x000D_
<!-- / The Context Menu -->_x000D_
<nav id="context-menu" class="context-menu">_x000D_
<ul class="context-menu__items">_x000D_
<li class="context-menu__item">_x000D_
<a href="#" class="context-menu__link" data-action="Delete This Photo"><i class="fa fa-empire"></i> Delete This Photo</a>_x000D_
</li>_x000D_
<li class="context-menu__item">_x000D_
<a href="#" class="context-menu__link" data-action="Photo Option 2"><i class="fa fa-envira"></i> Photo Option 2</a>_x000D_
</li>_x000D_
<li class="context-menu__item">_x000D_
<a href="#" class="context-menu__link" data-action="Photo Option 3"><i class="fa fa-first-order"></i> Photo Option 3</a>_x000D_
</li>_x000D_
<li class="context-menu__item">_x000D_
<a href="#" class="context-menu__link" data-action="Photo Option 4"><i class="fa fa-gitlab"></i> Photo Option 4</a>_x000D_
</li>_x000D_
<li class="context-menu__item">_x000D_
<a href="#" class="context-menu__link" data-action="Photo Option 5"><i class="fa fa-ioxhost"></i> Photo Option 5</a>_x000D_
</li>_x000D_
<li class="context-menu__item">_x000D_
<a href="#" class="context-menu__link"><i class="fa fa-arrow-right"></i> Add Photo to</a>_x000D_
<ul>_x000D_
<li><a href="#!" class="context-menu__link" data-action="album-one"><i class="fa fa-camera-retro"></i> Album One</a></li>_x000D_
<li><a href="#!" class="context-menu__link" data-action="album-two"><i class="fa fa-camera-retro"></i> Album Two</a></li>_x000D_
<li><a href="#!" class="context-menu__link" data-action="album-three"><i class="fa fa-camera-retro"></i> Album Three</a></li>_x000D_
<li><a href="#!" class="context-menu__link" data-action="album-four"><i class="fa fa-camera-retro"></i> Album Four</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</nav>_x000D_
_x000D_
<!-- End # Context Menu -->_x000D_
_x000D_
_x000D_
</body>_x000D_
_x000D_
_x000D_
_x000D_
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title>Right Click</title>_x000D_
_x000D_
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />_x000D_
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>_x000D_
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>_x000D_
_x000D_
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
<span class="context-menu-one" style="border:solid 1px black; padding:5px;">Right Click Me</span>_x000D_
<script type="text/javascript">_x000D_
_x000D_
$(function() {_x000D_
$.contextMenu({_x000D_
selector: '.context-menu-one', _x000D_
callback: function(key, options) {_x000D_
var m = "clicked: " + key;_x000D_
window.console && console.log(m) || alert(m); _x000D_
},_x000D_
items: {_x000D_
"edit": {name: "Edit", icon: "edit"},_x000D_
"cut": {name: "Cut", icon: "cut"},_x000D_
copy: {name: "Copy", icon: "copy"},_x000D_
"paste": {name: "Paste", icon: "paste"},_x000D_
"delete": {name: "Delete", icon: "delete"},_x000D_
"sep1": "---------",_x000D_
"quit": {name: "Quit", icon: function(){_x000D_
return 'context-menu-icon context-menu-icon-quit';_x000D_
}}_x000D_
}_x000D_
});_x000D_
_x000D_
$('.context-menu-one').on('click', function(e){_x000D_
console.log('clicked', this);_x000D_
}) _x000D_
});_x000D_
</script>_x000D_
</body>_x000D_
</html>I know this question is very old, but just came up with the same problem and solved it myself, so I'm answering in case anyone finds this through google as I did. I based my solution on @Andrew's one, but basically modified everything afterwards.
EDIT: seeing how popular this has been lately, I decided to update also the styles to make it look more like 2014 and less like windows 95. I fixed the bugs @Quantico and @Trengot spotted so now it's a more solid answer.
EDIT 2: I set it up with StackSnippets as they're a really cool new feature. I leave the good jsfiddle here for reference thought (click on the 4th panel to see them work).
New Stack Snippet:
_x000D_
_x000D_
_x000D_
_x000D_
// JAVASCRIPT (jQuery)_x000D_
_x000D_
// Trigger action when the contexmenu is about to be shown_x000D_
$(document).bind("contextmenu", function (event) {_x000D_
_x000D_
// Avoid the real one_x000D_
event.preventDefault();_x000D_
_x000D_
// Show contextmenu_x000D_
$(".custom-menu").finish().toggle(100)._x000D_
_x000D_
// In the right position (the mouse)_x000D_
css({_x000D_
top: event.pageY + "px",_x000D_
left: event.pageX + "px"_x000D_
});_x000D_
});_x000D_
_x000D_
_x000D_
// If the document is clicked somewhere_x000D_
$(document).bind("mousedown", function (e) {_x000D_
_x000D_
// If the clicked element is not the menu_x000D_
if (!$(e.target).parents(".custom-menu").length > 0) {_x000D_
_x000D_
// Hide it_x000D_
$(".custom-menu").hide(100);_x000D_
}_x000D_
});_x000D_
_x000D_
_x000D_
// If the menu element is clicked_x000D_
$(".custom-menu li").click(function(){_x000D_
_x000D_
// This is the triggered action name_x000D_
switch($(this).attr("data-action")) {_x000D_
_x000D_
// A case for each action. Your actions here_x000D_
case "first": alert("first"); break;_x000D_
case "second": alert("second"); break;_x000D_
case "third": alert("third"); break;_x000D_
}_x000D_
_x000D_
// Hide it AFTER the action was triggered_x000D_
$(".custom-menu").hide(100);_x000D_
});/* CSS3 */_x000D_
_x000D_
/* The whole thing */_x000D_
.custom-menu {_x000D_
display: none;_x000D_
z-index: 1000;_x000D_
position: absolute;_x000D_
overflow: hidden;_x000D_
border: 1px solid #CCC;_x000D_
white-space: nowrap;_x000D_
font-family: sans-serif;_x000D_
background: #FFF;_x000D_
color: #333;_x000D_
border-radius: 5px;_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
/* Each of the items in the list */_x000D_
.custom-menu li {_x000D_
padding: 8px 12px;_x000D_
cursor: pointer;_x000D_
list-style-type: none;_x000D_
transition: all .3s ease;_x000D_
user-select: none;_x000D_
}_x000D_
_x000D_
.custom-menu li:hover {_x000D_
background-color: #DEF;_x000D_
}<!-- HTML -->_x000D_
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>_x000D_
_x000D_
<ul class='custom-menu'>_x000D_
<li data-action="first">First thing</li>_x000D_
<li data-action="second">Second thing</li>_x000D_
<li data-action="third">Third thing</li>_x000D_
</ul>_x000D_
_x000D_
<!-- Not needed, only for making it clickable on StackOverflow -->_x000D_
Right click meNote: you might see some small bugs (dropdown far from the cursor, etc), please make sure that it works in the jsfiddle, as that's more similar to your webpage than StackSnippets might be.
You can watch this tutorial: http://www.youtube.com/watch?v=iDyEfKWCzhg Make sure the context menu is hidden at first and has a position of absolute. This will ensure that there won't be multiple context menu and useless creation of context menu. The link to the page is placed in the description of the YouTube video.
$(document).bind("contextmenu", function(event){
$("#contextmenu").css({"top": event.pageY + "px", "left": event.pageX + "px"}).show();
});
$(document).bind("click", function(){
$("#contextmenu").hide();
});
I have a nice and easy implementation using bootstrap as follows.
<select class="custom-select" id="list" multiple></select>
<div class="dropdown-menu" id="menu-right-click" style=>
<h6 class="dropdown-header">Actions</h6>
<a class="dropdown-item" href="" onclick="option1();">Option 1</a>
<a class="dropdown-item" href="" onclick="option2();">Option 2</a>
</div>
<script>
$("#menu-right-click").hide();
$(document).on("contextmenu", "#list", function (e) {
$("#menu-right-click")
.css({
position: 'absolute',
left: e.pageX,
top: e.pageY,
display: 'block'
})
return false;
});
function option1() {
// something you want...
$("#menu-right-click").hide();
}
function option2() {
// something else
$("#menu-right-click").hide();
}
</script>
Simple One
- show context menu when right click anywhere in document
- avoid context menu hide when click inside context menu
- close context menu when press left mouse button
Note: dont use display:none instead use opacity to hide and show
_x000D_
_x000D_
_x000D_
_x000D_
var menu= document.querySelector('.context_menu');
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
menu.style.position = 'absolute';
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
menu.style.opacity = 1;
});
document.addEventListener("click", function(e){
if(e.target.closest('.context_menu'))
return;
menu.style.opacity = 0;
});.context_menu{
width:70px;
background:lightgrey;
padding:5px;
opacity :0;
}
.context_menu div{
margin:5px;
background:grey;
}
.context_menu div:hover{
margin:5px;
background:red;
cursor:pointer;
}<div class="context_menu">
<div>menu 1</div>
<div>menu 2</div>
</div>extra css
_x000D_
_x000D_
_x000D_
_x000D_
var menu= document.querySelector('.context_menu');
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
menu.style.position = 'absolute';
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
menu.style.opacity = 1;
});
document.addEventListener("click", function(e){
if(e.target.closest('.context_menu'))
return;
menu.style.opacity = 0;
});.context_menu{
width:120px;
background:white;
border:1px solid lightgrey;
opacity :0;
}
.context_menu div{
padding:5px;
padding-left:15px;
margin:5px 2px;
border-bottom:1px solid lightgrey;
}
.context_menu div:last-child {
border:none;
}
.context_menu div:hover{
background:lightgrey;
cursor:pointer;
}<div class="context_menu">
<div>menu 1</div>
<div>menu 2</div>
<div>menu 3</div>
<div>menu 4</div>
</div>I know that this is rather old also. I recently had a need to create a context menu that I inject into other sites that have different properties based n the element clicked.
It's rather rough, and there are probable better ways to achieve this. It uses the jQuery Context menu Library Located Here
I enjoyed creating it and though that you guys might have some use out of it.
Here is the fiddle. I hope that it can hopefully help someone out there.
$(function() {
function createSomeMenu() {
var all_array = '{';
var x = event.clientX,
y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
if (elementMouseIsOver.closest('a')) {
all_array += '"Link-Fold": {"name": "Link", "icon": "fa-external-link", "items": {"fold2-key1": {"name": "Open Site in New Tab"}, "fold2-key2": {"name": "Open Site in Split Tab"}, "fold2-key3": {"name": "Copy URL"}}},';
}
if (elementMouseIsOver.closest('img')) {
all_array += '"Image-Fold": {"name": "Image","icon": "fa-picture-o","items": {"fold1-key1": {"name":"Download Image"},"fold1-key2": {"name": "Copy Image Location"},"fold1-key3": {"name": "Go To Image"}}},';
}
all_array += '"copy": {"name": "Copy","icon": "copy"},"paste": {"name": "Paste","icon": "paste"},"edit": {"name": "Edit HTML","icon": "fa-code"}}';
return JSON.parse(all_array);
}
// setup context menu
$.contextMenu({
selector: 'body',
build: function($trigger, e) {
return {
callback: function(key, options) {
var m = "clicked: " + key;
console.log(m);
},
items: createSomeMenu()
};
}
});
});
As Adrian said, the plugins are going to work the same way. There are three basic parts you're going to need:
1: Event handler for 'contextmenu' event:
$(document).bind("contextmenu", function(event) {
event.preventDefault();
$("<div class='custom-menu'>Custom menu</div>")
.appendTo("body")
.css({top: event.pageY + "px", left: event.pageX + "px"});
});
Here, you could bind the event handler to any selector that you want to show a menu for. I've chosen the entire document.
2: Event handler for 'click' event (to close the custom menu):
$(document).bind("click", function(event) {
$("div.custom-menu").hide();
});
3: CSS to control the position of the menu:
.custom-menu {
z-index:1000;
position: absolute;
background-color:#C0C0C0;
border: 1px solid black;
padding: 2px;
}
The important thing with the CSS is to include the z-index and position: absolute
It wouldn't be too tough to wrap all of this in a slick jQuery plugin.
You can see a simple demo here: http://jsfiddle.net/andrewwhitaker/fELma/
The browser's context menu is being overridden. There is no way to augment the native context menu in any major browser.
Since the plugin is creating its own menu, the only part thats really being abstracted is the browser's context menu event. The plugin creates an html menu based on your configuration, then places that content at the location of your click.
Yes, this is the only way to go about creating a custom context menu. Obviously, different plugins do things slightly different, but they will all override the browser's event and place their own html-based menu in the correct place.
Source: Stackoverflow.com