menu.js
//SubMenu variable
var showDuration=200;
var hideDuration=200;
var mouseFree=true;
//Define NavigationMenu
function NavigationMenu(subMenus)
{
this.submenus=subMenus;
this.getMenu=function(menuID)
{
for (var i=0; i<this.submenus.length; i++)
{
if(menuID==this.submenus[i].ID)
{
return this.submenus[i];
}
};
}
this.show=function(menuName)
{
$('#'+menuName).css("position","absolute");
$('#'+menuName).css("left",controlLeftBottomPosition.left);
$('#'+menuName).css("top",controlLeftBottomPosition.top);
$('#'+menuName).fadeTo(showDuration,1,null);
this.getMenu(menuName).hidden=false;
}
this.showSubMenu=function(mainMenuID)
{
$('#'+mainMenuID).css("position","absolute");
$('#'+mainMenuID).css("left",controlLeftBottomPosition.left);
$('#'+mainMenuID).css("top",controlLeftBottomPosition.top);
$('#'+mainMenuID).fadeTo(showDuration,1,null);
this.closeOtherSubMenu(mainMenuID);
this.show(mainMenuID);
}
this.closeOtherSubMenu=function(remainMenuID)
{
for (var i=0; i<this.submenus.length; i++)
{
if (remainMenuID != this.submenus[i].ID)
{
this.hide(this.submenus[i].ID)
}
};
}
this.hide=function(menuName)
{
$('#'+menuName).fadeTo(hideDuration,0,null);
}
this.hideAll=function ()
{
if(mouseFree)
{
for (var i=0; i<this.submenus.length; i++)
{
$('#'+this.submenus[i].ID).fadeTo(hideDuration,0,null);
this.submenus[i].hidden=true;
};
}
}
}
//Define SubMenu
function SubMenu(ID,Name)
{
this.hidden=true;
this.ID=ID;
this.Name=Name;
}
function fireMouseOver(linkName)
{
mouseFree=false;
$('#'+linkName).css("color","yellow");
}
function fireMouseOut(linkName)
{
mouseFree=true;
$('#'+linkName).css("color","white");
}
menu.html
<html>
<head>
<style type="text/css">
#menu
{
width:auto;;
height:30px;
list-style-type:none;
background-color:black;
}
#menu li
{
float:left;
display:inline;
text-decoration:none;
margin:0 5px 0 5px;
line-height:30px;
}
#menu li a
{
text-decoration:none;
display:block;
color:white;
cursor:pointer;
background-color:black;
}
#menu li a:hover
{
color:yellow;
}
#menu li span
{
text-decoration:none;
display:block;
color:white;
cursor:pointer;
background-color:black;
}
#menu li span:hover
{
color:yellow;
}
div
{
background-color:gray;
color:white;
width:auto;
height:100px;
display:none;
}
</style>
<script language="JavaScript" type="text/javascript" src="jquery1_5.js"></script>
<script language="JavaScript" type="text/javascript" src="menu.js"></script>
<script language="JavaScript" type="text/javascript">
//Utility variable
var mousePosition;
var controlLeftBottomPosition;
//Capture Positions
document.οnmοusemοve=mouseMove;
function mouseMove(ev)
{
ev=ev||window.event;
mousePosition=getMousePosition(ev);
$('#x').val(mousePosition.x);
$('#y').val(mousePosition.y);
}
function getMousePosition(ev)
{
if(ev.pageX||ev.pageY)
{
return {x:ev.pageX,y:ev.pageY};
}
ieX=ev.clientX+document.documentElement.scrollLeft-document.body.clientLeft;
ieY=ev.clientY+document.documentElement.scrollTop-document.body.clientTop;
return {x:ieX,y:ieY};
}
function getCurrentControlPosition(controlName)
{
controlLeftBottomPosition=$('#'+controlName).position();
controlLeftBottomPosition.top=controlLeftBottomPosition.top+$('#'+controlName).height();
}
var submenus=[new SubMenu('dropdownmenuHome','Home'),new SubMenu('dropdownmenuAboutUs','AboutUs'),new SubMenu('dropdownmenuNews','News'),new SubMenu('dropdownmenuProduct','Product'),new SubMenu('dropdownmenuService','Service'),new SubMenu('dropdownmenuHelp','Help')];
var mainMenu=new NavigationMenu(submenus);
function closeAll()
{
mainMenu.hideAll();
}
function pageInit()
{
$('#mainBody').bind("click",closeAll);
}
</script>
</head>
<body id="mainBody" οnlοad="pageInit();">
X:<input id="x" type="text"> Y:<input id="y" type="text">
<input id="buttonHide" type="button" value="Click me to hide" οnclick="hideAll();">
<ul id="menu">
<li>
<a id="homeLink" οnclick="getCurrentControlPosition('homeLink');mainMenu.showSubMenu('dropdownmenuHome');" οnmοuseοver="fireMouseOver('homeLink');" οnmοuseοut="fireMouseOut('homeLink');">Home</a>
</li>
<li>
<a id="aboutLink" οnclick="getCurrentControlPosition('aboutLink');mainMenu.showSubMenu('dropdownmenuAboutUs');" οnmοuseοver="fireMouseOver('aboutLink');" οnmοuseοut="fireMouseOut('aboutLink');">AboutUs</a>
</li>
<li>
<a id="newsLink" οnclick="getCurrentControlPosition('newsLink');mainMenu.showSubMenu('dropdownmenuNews');" οnmοuseοver="fireMouseOver('newsLink');" οnmοuseοut="fireMouseOut('newsLink');" >News</a>
</li>
<li>
<a id="productLink" οnclick="getCurrentControlPosition('productLink');mainMenu.showSubMenu('dropdownmenuProduct');" οnmοuseοver="fireMouseOver('productLink');" οnmοuseοut="fireMouseOut('productLink');" >Product</a>
</li>
<li>
<a id="serviceLink" οnclick="getCurrentControlPosition('serviceLink');mainMenu.showSubMenu('dropdownmenuService');" οnmοuseοver="fireMouseOver('serviceLink');" οnmοuseοut="fireMouseOut('serviceLink');" >Service</a>
</li>
<li>
<a id="helpLink" οnclick="getCurrentControlPosition('helpLink');mainMenu.showSubMenu('dropdownmenuHelp');" οnmοuseοver="fireMouseOver('helpLink');" οnmοuseοut="fireMouseOut('helpLink');" >Help</a>
</li>
</ul>
<div id="dropdownmenuHome">
This is the home menu.
</div>
<br />
<div id="dropdownmenuAboutUs">
This is the about us menu.
</div>
<div id="dropdownmenuNews">
This is the news menu.<a href="http://www.baidu.com">baidu</a>
</div>
<div id="dropdownmenuProduct">
This is the product menu.<a href="http://www.google.com">Google</a>
</div>
<div id="dropdownmenuService">
This is the service menu.<a href="http://www.baidu.com">baidu</a>
</div>
<div id="dropdownmenuHelp">
This is the help menu.<a href="http://www.google.com">Google</a>
</div>
</body>
</html>