Menu
The following is a very simple horizontal menu, but it does not do quite what I want.
I see two problems: ?
1.
I thought surrounding the sub menu <DIV> sections inside a <DIV> would work for the ‘onmouseout’, but it does not. ‘onmouseover’ works fine to display the submenus but they remain forever. Any ideas what to change here?
I thought the width statement in the ‘mainMenu’ class would stretch the links display, but it does not seem to have any effect on the display. I also tried to surround the links in a <SPAN>, but again, no change to the display width. I know it’s the CSS, but I seem to be missing something here.
[code]
<html>
<head>
<title>Simple Menu</title>
<style type=”text/css”>
.mainMenu { width:150px; }
.subMenu { display:none; }
</style>
<script type=”text/javascript”>
var SubMenus = [‘sub1′,’sub2′,’sub3’];
function hide() {
for (var i=0; i<SubMenus.length; i++) { document.getElementById(SubMenus[i]).style.display = ‘none’; }
}
function show(IDS) { // hide(); // test to remove display
document.getElementById(IDS).style.display = ‘block’;
}
</script>
</head>
<body>
<div id=”topMenu” onmouseout=”hide()”>
<a href=”#” onmouseover=”show(‘sub1’)”><span class=”mainMenu”>Top 1</span></a>
<a href=”#” onmouseover=”show(‘sub2’)”><span class=”mainMenu”>Top 2</span></a>
<a href=”#” onmouseover=”show(‘sub3’)”><span class=”mainMenu”>Top 3</span></a>
<div id=”sub1″ class=”subMenu”>
<a href=”#” onclick=”alert(‘sub11’)”>Sub 11</a>
<a href=”#” onclick=”alert(‘sub12’)”>Sub 12</a>
<a href=”#” onclick=”alert(‘sub13’)”>Sub 13</a>
</div>
<div id=”sub2″ class=”subMenu”>
<a href=”#” onclick=”alert(‘sub21’)”>Sub 21</a>
<a href=”#” onclick=”alert(‘sub22’)”>Sub 22</a>
<a href=”#” onclick=”alert(‘sub23’)”>Sub 23</a>
</div>
<div id=”sub3″ class=”subMenu”>
<a href=”#” onclick=”alert(‘sub31’)”>Sub 31</a>
<a href=”#” onclick=”alert(‘sub32’)”>Sub 32</a>
<a href=”#” onclick=”alert(‘sub33’)”>Sub 33</a>
</div>
</div>
</body>
</html>