Overview
There are many of context menu examples on the internet. This javascript context menu is very lightweight, OOP based and item-specific. You can setup it in a few seconds.
Include the script and the style sheet at the top of your code (you can find the code in the source code section of this page). Do it in <head> tag. After loading the script you can write your code to attach context menu.
Javascript context menu code tested in IE5.5+, FF1.0+.
Javascript context menu demo page
View the demo page for this article
View the demo page for this article
Source code for index.html (Download source code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="webtoolkit.contextmenu.css" />
<script type="text/javascript" src="webtoolkit.contextmenu.js"></script>
<script type="text/javascript">
SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});
SimpleContextMenu.attach('container', 'CM1');
</script>
</head>
<body>
<ul id="CM1" class="SimpleContextMenu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
<input type="text" name="field" value="" />
<div class="container">Cointainer1</div>
<div class="container">Cointainer2</div>
<div class="container">Cointainer3</div>
</body>
</html>
Source code for webtoolkit.contextmenu.css (Download source code)
ul.SimpleContextMenu {
display: none;
position: absolute;
margin: 0px;
padding: 0px;
font-family: verdana;
font-size: 12px;
list-style-type: none;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
ul.SimpleContextMenu li {
border-bottom: 1px solid #000000;
}
ul.SimpleContextMenu li a {
display: block;
width: 100px;
padding: 2px 10px 3px 10px;
text-decoration: none;
color: #ff0000;
background: #eeeeee;
}
ul.SimpleContextMenu li a:hover {
text-decoration: none;
color: #ffffff;
background: #ff0000;
}
Source code for webtoolkit.contextmenu.js (Download source code)
/**
*
* Simple Context Menu
* http://www.webtoolkit.info/
*
**/
var SimpleContextMenu = {
// private attributes
_menus : new Array,
_attachedElement : null,
_menuElement : null,
_preventDefault : true,
_preventForms : true,
// public method. Sets up whole context menu stuff..
setup : function (conf) {
if ( document.all && document.getElementById && !window.opera ) {
SimpleContextMenu.IE = true;
}
if ( !document.all && document.getElementById && !window.opera ) {
SimpleContextMenu.FF = true;
}
if ( document.all && document.getElementById && window.opera ) {
SimpleContextMenu.OP = true;
}
if ( SimpleContextMenu.IE || SimpleContextMenu.FF ) {
document.oncontextmenu = SimpleContextMenu._show;
document.onclick = SimpleContextMenu._hide;
if (conf && typeof(conf.preventDefault) != "undefined") {
SimpleContextMenu._preventDefault = conf.preventDefault;
}
if (conf && typeof(conf.preventForms) != "undefined") {
SimpleContextMenu._preventForms = conf.preventForms;
}
}
},
// public method. Attaches context menus to specific class names
attach : function (classNames, menuId) {
if (typeof(classNames) == "string") {
SimpleContextMenu._menus[classNames] = menuId;
}
if (typeof(classNames) == "object") {
for (x = 0; x < classNames.length; x++) {
SimpleContextMenu._menus[classNames[x]] = menuId;
}
}
},
// private method. Get which context menu to show
_getMenuElementId : function (e) {
if (SimpleContextMenu.IE) {
SimpleContextMenu._attachedElement = event.srcElement;
} else {
SimpleContextMenu._attachedElement = e.target;
}
while(SimpleContextMenu._attachedElement != null) {
var className = SimpleContextMenu._attachedElement.className;
if (typeof(className) != "undefined") {
className = className.replace(/^\s+/g, "").replace(/\s+$/g, "")
var classArray = className.split(/[ ]+/g);
for (i = 0; i < classArray.length; i++) {
if (SimpleContextMenu._menus[classArray[i]]) {
return SimpleContextMenu._menus[classArray[i]];
}
}
}
if (SimpleContextMenu.IE) {
SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentElement;
} else {
SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentNode;
}
}
return null;
},
// private method. Shows context menu
_getReturnValue : function (e) {
var returnValue = true;
var evt = SimpleContextMenu.IE ? window.event : e;
if (evt.button != 1) {
if (evt.target) {
var el = evt.target;
} else if (evt.srcElement) {
var el = evt.srcElement;
}
var tname = el.tagName.toLowerCase();
if ((tname == "input" || tname == "textarea")) {
if (!SimpleContextMenu._preventForms) {
returnValue = true;
} else {
returnValue = false;
}
} else {
if (!SimpleContextMenu._preventDefault) {
returnValue = true;
} else {
returnValue = false;
}
}
}
return returnValue;
},
// private method. Shows context menu
_show : function (e) {
SimpleContextMenu._hide();
var menuElementId = SimpleContextMenu._getMenuElementId(e);
if (menuElementId) {
var m = SimpleContextMenu._getMousePosition(e);
var s = SimpleContextMenu._getScrollPosition(e);
SimpleContextMenu._menuElement = document.getElementById(menuElementId);
SimpleContextMenu._menuElement.style.left = m.x + s.x + 'px';
SimpleContextMenu._menuElement.style.top = m.y + s.y + 'px';
SimpleContextMenu._menuElement.style.display = 'block';
return false;
}
return SimpleContextMenu._getReturnValue(e);
},
// private method. Hides context menu
_hide : function () {
if (SimpleContextMenu._menuElement) {
SimpleContextMenu._menuElement.style.display = 'none';
}
},
// private method. Returns mouse position
_getMousePosition : function (e) {
e = e ? e : window.event;
var position = {
'x' : e.clientX,
'y' : e.clientY
}
return position;
},
// private method. Get document scroll position
_getScrollPosition : function () {
var x = 0;
var y = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
x = window.pageXOffset;
y = window.pageYOffset;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
var position = {
'x' : x,
'y' : y
}
return position;
}
}
