How to Display a Popup Menu
Placing a JavaScript code on your website allows you to use a dynamic, pop-up menu as your website navigation. When a user right-clicks anywhere on the Web page, the pop-up menu will appear with links from which to choose. Clicking anywhere outside the pop-up will make the menu disappear. This allows the user to see your menu no matter how far down the page he has scrolled. You can configure a basic JavaScript code to create this pop-up menu on your Web page.
Other People Are Reading
Instructions
-
-
1
Copy the following code:
<script language="javascript">
<!--
var ie = document.all
var ns6 = document.getElementById&&!document.allvar 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> -
2
Paste this code between the <head> and </head> tags in your Web page's HTML.
-
-
3
Copy this code:
<!---------------------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="#">Item</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="#">Item</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="#">Item</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="#">Item</a></td>
</tr>
</table>
</td></tr>
</table>
</div> -
4
Paste the code between the <body> </body> tags of your Web page's HTML code. It does not matter where in the body section you paste this code since the menu will appear dynamically wherever the user right-clicks.
-
5
Configure the link items in the code. For example, in the code <a href="#">Item</a>, replace the "#" with the URL of the site to which you want to link. Replace the "Item" with the name of that link.
-
6
Save your edited Web page and upload it to your Web host to view your pop-up menu.
-
1
