PDA

View Full Version : Drop-Down Menu

rlemon
04-18-2005, 10:49 PM
check it out. Cool little drop down menu.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu 002</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
var myTimer;
var myMenus = 5; // number of menus must be accurate
function initItem(){
for(var i = 1; i <= myMenus; i++){
var menuID = 'mnu' + i;
var SmenuID = 'Smnu' + i;

var mnuX = document.getElementById(menuID).offsetLeft;
var mnuY = document.getElementById(menuID).offsetTop;

var SmnuX = mnuX;
var SmnuY = mnuY + 20;

document.getElementById(SmenuID).style.left = SmnuX;
document.getElementById(SmenuID).style.top = SmnuY;

}
}
function clearAll(){
for(var i = 1; i <= myMenus; i++){
var SmenuID = 'Smnu' + i;
document.getElementById(SmenuID).style.visibility = 0 ? "visible" : "hidden";
}
}
function startSub(ID){
window.clearTimeout(myTimer); // reset timer
document.getElementById(ID).style.visibility = 1 ? "visible" : "hidden";
}
function startOut(){
window.setTimeout("clearAll()", 500);
}
</script>
</head>

<body onload="initItem()" onResize="initItem()">
<table height="20" cellspacing="5" cellpadding="0" border="0">
<tr>
<td><div id="mnu1" onMouseOver="startSub('Smnu1')" onMouseOut="clearAll()" style="position:relative; z-index:1; border:1px solid #000000;">myMnu_1</div></td>
<td><div id="mnu2" onMouseOver="startSub('Smnu2')" onMouseOut="clearAll()" style="position:relative; z-index:1; border:1px solid #000000;">myMnu_2</div></td>
<td><div id="mnu3" onMouseOver="startSub('Smnu3')" onMouseOut="clearAll()" style="position:relative; z-index:1; border:1px solid #000000;">myMnu_3</div></td>
<td><div id="mnu4" onMouseOver="startSub('Smnu4')" onMouseOut="clearAll()" style="position:relative; z-index:1; border:1px solid #000000;">myMnu_4</div></td>
<td><div id="mnu5" onMouseOver="startSub('Smnu5')" onMouseOut="clearAll()" style="position:relative; z-index:1; border:1px solid #000000;">myMnu_5</div></td>

</tr>
</table>

<!-- These can go anywhere, i choose to leave them at the bottom of the document -->
<div id="Smnu1" onMouseOver="startSub('Smnu1')" onMouseOut="clearAll()" style="position:absolute; z-index:1; border:1px solid #000000; visibility:hidden;">some_link_some_link<br>some link<br>some link<br>some link<br>some link<br></div>
<div id="Smnu2" onMouseOver="startSub('Smnu2')" onMouseOut="clearAll()" style="position:absolute; z-index:1; border:1px solid #000000; visibility:hidden;">some link<br>some link<br>some_link some_link<br>some link<br>some link<br>some link<br>some link<br>some link<br>some link<br>some link<br></div>
<div id="Smnu3" onMouseOver="startSub('Smnu3')" onMouseOut="clearAll()" style="position:absolute; z-index:1; border:1px solid #000000; visibility:hidden;">some link<br>some link<br>some link<br>some link<br></div>
<div id="Smnu4" onMouseOver="startSub('Smnu4')" onMouseOut="clearAll()" style="position:absolute; z-index:1; border:1px solid #000000; visibility:hidden;">some link<br>some link<br>some link<br>some linksome_link<br>some link<br>some link<br>some link<br></div>
<div id="Smnu5" onMouseOver="startSub('Smnu5')" onMouseOut="clearAll()" style="position:absolute; z-index:1; border:1px solid #000000; visibility:hidden;">some link<br>some link<br>some link<br>some link<br>some link<br>some link<br></div>

</body>
</html>



http://www.rlemon.com/new_menu.html