Targol,
I did quite a few changes.
Sometimes standards compliancy isn't as easy as it could be. I blame MS for providing crooked ways of doing things in IE.
Unfortunatly because IE still is in the lead we have to continue to support it and because it's event handling differs from the World Wide Web Consortium accepted standard we have to catter to two very specific events system.
Events already aren't too easy to understand so to learn two systems is not always fun. I just wished that IE would start supporting real standards like Gecko Based Browsers (GBB).
So here is the updated Javascript (for standalone purpose the CSS is included right in the HTML). This is the easiest and cleanest way that I can get a menu working (without XAPI).
Notice that I prefer writing for loops rather than typing something a few times (writing onmouseover="" every time is annoying to me. I prefer having a for loop do that for me. Especially if my menu could have 15 items. Not only do I save typing but I save bandwith as well!
The HideMenu function was changed so that it hides all submenus except the one I give as an argument. If I don't give any arguments it hides all so the body can use it too.
I hope it's readable enough for people to understand. And I really hope you accept it as your FAQ(please improve it beforehand if you wish).
To me Microsoft is the bully in the schoolyard and too many people in too many countries will not have access to sites if they depend on IE only features. Standards are there so that everyone even with a free browser and operating system should be able to enjoy the web fully. It used to be what the web was all about. Free access for all and peace on earth!
So on that note here is the code (works on GBB and in theory IE5+):
<html>
<head>
<title>dynamic menu</title>
<style>
.subMenuDiv
{
border : solid 1px;
position : absolute;
display : block;
width : 200px;
height : 220px;
overflow : hidden;
text-align : left;
z-index : 200;
visibility = hidden;
}
</style>
<Script Language="javaScript">
var menus = [];
var subMenus = [];
function ShowMenu(event)
{
var event = event || window.event;
event.cancelBubble = true;
var element = event.target ? event.target : event.srcElement ;
var menu = 0; // this little for loop could be replaced with XAPI's Array.indexOf method
for (var i = 0; i < menus.length; i++)
{
if (menus
== element)
{
menu = i;
break;
}
}
subMenus[menu].style.top = element.offsetTop + element.offsetHeight + document.getElementById("Table1".offsetTop;
subMenus[menu].style.left = element.offsetLeft + document.getElementById("Table1".offsetLeft;
HideMenus(menu);
}
function HideMenus(menu)
{
for (var i = 0; i < subMenus.length; i++)
{
subMenus.style.visibility = (i == menu) ? "visible" : "hidden" ;
}
}
function initMenu()
{
menus = [document.getElementById("File",
document.getElementById("Edit",
document.getElementById("Display",
document.getElementById("Options"];
subMenus = [document.getElementById("sub_File",
document.getElementById("sub_Edit",
document.getElementById("sub_Display",
document.getElementById("sub_Options"];
for (var i = 0; i < menus.length; i++)
{
menus.onmouseover = ShowMenu;
}
for (var i = 0; i < subMenus.length; i++)
{
subMenus.onmouseover = function (event)
{
(event || window.event).cancelBubble = true;
}
}
}
</Script>
</head>
<body onmouseover="HideMenus();" onload="initMenu()">
<Table ID="Table1" border="1px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<tbody>
<TR>
<TD id="File">File</TD>
<TD id="Edit">Edit</TD>
<TD id="Display">Display</TD>
<TD id="Options">Options</TD>
</TR>
</tbody>
</Table>
<Div id="sub_File" class="subMenuDiv" style="top : 40px; left: 13px">sub_File</div>
<Div id="sub_Edit" class="subMenuDiv" style="top : 40px; left: 119px">sub_Edit</Div>
<Div id="sub_Display" class="subMenuDiv" style="top : 40px; left: 225px">sub_Display</Div>
<Div id="sub_Options" class="subMenuDiv" style="top : 40px; left: 331px">sub_Options</Div>
</body>
</html> Gary Haran
![[hammer]](/data/assets/smilies/hammer.gif "[hammer] [hammer]")
