Back to Scripts

eLouai's Javascript DHTML Popup Menu

How to implement a cross browser, right click popup menu using javascript (dhtml). The default contextmenu is disabled and replaced with our own div which we hide or make visible whenever the right mouse button (the context menu) is selected.

The source code is split into the javascript source (see below) and the html source (see below)

To demonstrate the popupmenu CLICK your RIGHT mouse button to display the Popup menu. Click anywhere OUTSIDE the menu to hide it

It would be very easy to add either a javascript enabled command when a menu item is selected OR loading a web page.

Note: since the context menu is effectively disabled select the text below and Control+C to copy.

Javascript Source

<script language="javascript">
<!--
var ie	= document.all
var ns6	= document.getElementById&&!document.all

var isMenu 	= false ;

var menuSelObj = null ;
var overpopupmenu = false;

function mouseSelect(e)
{
	var obj = ns6 ? e.target.parentNode : event.srcElement.parentElement;

	if( isMenu )
	{
		if( overpopupmenu == false )
		{
			isMenu = false ;
			overpopupmenu = false;
			document.getElementById('menudiv').style.display = "none" ;
			return true ;
		}
		return true ;
	}
	return false;
}

// POP UP MENU
function	ItemSelMenu(e)
{
	var	obj = ns6 ? e.target.parentNode : event.srcElement.parentElement;	

      menuSelObj = obj ;
	if (ns6)
	{
		document.getElementById('menudiv').style.left = e.clientX+document.body.scrollLeft;
		document.getElementById('menudiv').style.top = e.clientY+document.body.scrollTop;
	} else
	{
		document.getElementById('menudiv').style.pixelLeft = event.clientX+document.body.scrollLeft;
		document.getElementById('menudiv').style.pixelTop = event.clientY+document.body.scrollTop;
	}
	document.getElementById('menudiv').style.display = "";
	document.getElementById('item1').style.backgroundColor='#FFFFFF';
	document.getElementById('item2').style.backgroundColor='#FFFFFF';
	document.getElementById('item3').style.backgroundColor='#FFFFFF';
	document.getElementById('item4').style.backgroundColor='#FFFFFF';
	isMenu = true;
	return false ;
}

document.onmousedown 	= mouseSelect;
document.oncontextmenu 	= ItemSelMenu;
//-->
</script>

HTML <DIV> Source

This is the DIV that contains the popup menu

<!---------------------POPUP MENU-------------------------->
<div id="menudiv" style="position:absolute;display:none;top:0px;left:0px;z-index:10000;" onmouseover="javascript:overpopupmenu=true;" onmouseout="javascript:overpopupmenu=false;">
<table width=82 cellspacing=1 cellpadding=0 bgcolor=lightgray>
  <tr><td>
    <table width=80 cellspacing=0 cellpadding=0>
      <tr>
        <td id="item1" bgcolor="#FFFFFF" width="80" height="16" onMouseOver="this.style.backgroundColor='#EFEFEF'" onMouseOut="this.style.backgroundColor='#FFFFFF'">  <a href="#">Item1</a></td>
      </tr>
      <tr>
        <td id="item2" bgcolor="#FFFFFF" width="80" height="16" onMouseOver="this.style.backgroundColor='#EFEFEF'" onMouseOut="this.style.backgroundColor='#FFFFFF'">  <a href="#">Item2</a></td>
      </tr>
      <tr>
        <td id="item3" bgcolor="#FFFFFF" width="80" height="16" onMouseOver="this.style.backgroundColor='#EFEFEF'" onMouseOut="this.style.backgroundColor='#FFFFFF'">  <a href="#">Item3</a></td>
      </tr>
      <tr>
        <td id="item4" bgcolor="#ffffff" width="80" height="16" onMouseOver="this.style.backgroundColor='#EFEFEF'" onMouseOut="this.style.backgroundColor='#FFFFFF'">  <a href="#">Item4</a></td>
      </tr>
    </table>
  </td></tr>
</table>
</div>

About Privacy Policy Hosting by Web Hosting Canada

Except where otherwise noted, this site is licensed under a Creative Commons License