You are here: irt.org | FAQ | DHTML | Q1418 [ previous next ]
Try the following:
<html>
<head>
<title>Fall Up Menu</title>
<style><!--
.item { cursor:hand; color:black; font-size:12 }
.item:hover { cursor:hand; color:red; font-size:12 }
a. { cursor:hand; font-size:12; color:navy; text-decoration:none }
a:active { cursor:hand; color:navy }
a.entry:hover { cursor:hand; color:red; text-decoration:underline }
.list { position: absolute; background:silver }
.toolbar { position:absolute }
//--></style>
<script language="JScript"><!--
document.onmouseover=openMenu;
function openMenu() {
var noof_menus = 4;
currentElement = window.event.toElement;
if (currentElement.className == 'item') {
showList = document.all(currentElement.id + 'list');
if (showList.style.posTop == 0)
setTimeout('slide("' + showList.id + '")',1);
showList.style.display='block';
}
for (i=1; i<=noof_menus; i++) {
openItem='item' + i + 'list';
elementOpen = document.all(openItem);
if ((elementOpen.style.display == 'block') && (elementOpen != showList))
elementOpen.style.display='none';
if (currentElement.className == "body")
elementOpen.style.display='none';
}
}
function slide(showList) {
document.all[showList].style.posTop -= document.all[showList].clientHeight;
}
//--></script>
</head>
<body bgcolor="white" class="body" text="black" link="black" vlink="black" marginwidth="0" marginheight="0">
<pre>
</pre>
<div class="toolbar">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ACD6FF" height="20">
<tr>
<td align="left">
<table id="item1list" class="list" style="display:none">
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
</table>
<a href="javascript:;" id="item1" class="item">Menu 1</a></td>
<td align="left">
<table id="item2list" class="list" style="2isplay:none">
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
</table>
<a href="javascript:;" id="item2" class="item">Menu 2</a></td>
<td align="left">
<table id="item3list" class="list" style="display:none">
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
</table>
<a href="javascript:;" id="item3" class="item">Menu 3</a></td>
<td align="left">
<table id="item4list" class="list" style="display:none">
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
<tr><td><a href="about:blank" class="entry">text link</a></td></tr>
</table>
<a href="javascript:;" id="item4" class="item">Menu 4</a></td>
</tr>
</table>
</div>
</body>
</html>