Download context menu

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin-left:0px;
	}
	#contextMenu{	/* The menu container */
		border:1px solid #202867;	/* Border around the entire menu */
		background-color:#FFF;	/* White background color of the menu */
		margin:0px;
		padding:0px;
		width:175px;	/* Width of context menu */
		font-family:arial;
		font-size:12px;
		background-image:url('images/gradient.gif');
		background-repeat:repeat-y;
		
		/* Never change these two values */
		display:none;
		position:absolute;

	}
	#contextMenu a{	/* Links in the context menu */
		color: #000;
		text-decoration:none;
		line-height:25px;
		vertical-align:middle;	
		height:28px;
		
		/* Don't change these 3 values */
		display:block;	
		width:100%;
		clear:both;
		
	}
	#contextMenu li{	/* Each menu item */
		list-style-type:none;
		padding:1px;
		margin:1px;
		cursor:pointer;	
		clear:both;
	}
	#contextMenu li div{	/* Dynamically created divs */
		cursor:pointer;	
	}
	#contextMenu .contextMenuHighlighted{	/* Highlighted context menu item */
		border:1px solid #000;
		padding:0px;
		background-color:#E2EBED;
	
	}
	#contextMenu img{
		border:0px;
	}
	#contextMenu .imageBox{	/* Dynamically created divs for images in the menu */

		float:left;
		padding-left:2px;
		padding-top:3px;
		vertical-align:middle;
		
		width: 30px;	/* IE 5.x */
		width/* */:/**/28px;	/* Other browsers */
		width: /**/28px;
	}
	#contextMenu .itemTxt{
		float:left;		
		width: 120px;	/* IE 5.x */
		width/* */:/**/140px;	/* Other browsers */
		width: /**/140px;		
	}
	</style>
	<script type="text/javascript">
	
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/

	
	var contextMenuObj;
	var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;	
	var activeContextMenuItem = false;
	function highlightContextMenuItem()
	{
		this.className='contextMenuHighlighted';
	}
	
	function deHighlightContextMenuItem()
	{
		this.className='';
	}
	
	function showContextMenu(e)
	 {
	  contextMenuSource = this;
	  if(activeContextMenuItem)activeContextMenuItem.className='';
	  if(document.all)e = event;
	  var xPos = e.clientX;
	  if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
	   xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 20; 
	  }
	  
	  var yPos = e.clientY;
	  if(window.document.body.scrollTop > 0)
	    {
	      yPos = (window.screen.Height) ? e.clientY + window.document.body.scrollTop -20 : e.clientY -20;
	    }
	    else if (window.pageYOffset) 
	    {
	      yPos = (window.pageYOffset > 0) ? e.clientY + window.pageYOffset -20 : e.clientY -20;
	    }
	    else
	    { yPos = e.clientY -20; }
	  /* * */
	  contextMenuObj.style.left = xPos + 'px';
	  contextMenuObj.style.top = yPos + 'px';
	  contextMenuObj.style.display='block';
	  return false; 
	}

	function hideContextMenu(e)
	{
		if(document.all) e = event;
		if(e.button==0 && !MSIE){
			
		}else{
			contextMenuObj.style.display='none';
		}
	}
	
	function initContextMenu()
	{
		contextMenuObj = document.getElementById('contextMenu');
		contextMenuObj.style.display = 'block';
		var menuItems = contextMenuObj.getElementsByTagName('LI');
		for(var no=0;no<menuItems.length;no++){
			menuItems[no].onmouseover = highlightContextMenuItem;
			menuItems[no].onmouseout = deHighlightContextMenuItem;
			
			var aTag = menuItems[no].getElementsByTagName('A')[0];
			
			var img = menuItems[no].getElementsByTagName('IMG')[0];
			if(img){
				var div = document.createElement('DIV');
				div.className = 'imageBox';
				div.appendChild(img);
				
				if(MSIE && navigatorVersion<6){
					aTag.style.paddingLeft = '0px';
				}
				
				var divTxt = document.createElement('DIV');	
				divTxt.className='itemTxt';
				divTxt.innerHTML = aTag.innerHTML;
				
				aTag.innerHTML = '';
				aTag.appendChild(div);
				aTag.appendChild(divTxt);
				if(MSIE && navigatorVersion<6){
					div.style.position = 'absolute';
					div.style.left = '2px';
					divTxt.style.paddingLeft = '15px';
				}
				
				if(!document.all){
					var clearDiv = document.createElement('DIV');
					clearDiv.style.clear = 'both';
					aTag.appendChild(clearDiv);		
				}
			}else{
				if(MSIE && navigatorVersion<6){
					aTag.style.paddingLeft = '15px';
					aTag.style.width = (aTag.offsetWidth - 30) + 'px';
				}else{
					aTag.style.paddingLeft = '30px';
					aTag.style.width = (aTag.offsetWidth - 60) + 'px';
				}
			}
		}
		contextMenuObj.style.display = 'none';		
		document.documentElement.oncontextmenu = showContextMenu;
		document.documentElement.onclick = hideContextMenu;
	}

	</script>

Put this into your <BODY> section

<ul id="contextMenu">
	<li><a href="http://www.dhtmlgoodies.com"><img src="images/button.gif">Home</a></li>
	<li><a href="#" onclick="document.getElementById('htmlSource').style.display='block';return false">View HTML</a></li>
	<li><a href="#">Menu item 3</a></li>
	<li><a href="#">Menu item 4</a></li>
</ul>
<script type="text/javascript">
initContextMenu();
</script>

Configuration

The context menu is based on an unordered list, so you use only HTML to create your menu. Example:
<ul id="contextMenu">
  <li><a href="http://www.dhtmlgoodies.com">
<img src="images/button.gif">Home</a></li>
  <li><a href="#" onclick="jsFunction();return false">
View HTML</a></li>
  <li><a href="#">Menu item 3</a></li>
  <li><a href="#">Menu item 4</a></li>
</ul>

Remember to give your <UL> the id "contextMenu"

You initialize the menu by calling the javascript function "initContextMenu". Example:
<script type="text/javascript"> initContextMenu(); </script>
Put this code below your <UL><LI> list

The layout of the menu is specified in the CSS. Border colors, rollover colors and which gradient image to used is all defined there.

Download images

There is only one image needed for this script. That is the background gradient. To download it, right click on it below and select "Save target As". Put it in a sub folder called images.

You can also create your own gradient if you like. The size of our gradient is 24 x 10 pixels. There's a nice gradient maker available at dynamicdrive.com.