Heres the JavaScript and Coding for my Global Nav on my guides4all site:
JavaScript (in <head>)
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
JavaScript (at the end of the <body>)
<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
The Divs etc are like so:
<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="index.html" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a><a href="internet%5Cindex.html" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Internet</a><a href="office%5Cindex.html" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Office</a><a href="adobe%5Cindex.html" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Adobe</a><a href="psp%5Cindex.html" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">PSP</a><a href="hardware%5Cindex.html" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Hardware</a><a href="win%5Cindex.html" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">Windows</a>
</div>
<!--end globalLinks-->
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav"> </div>
<div id="subglobal2" class="subglobalNav">
<a href="internet%5Cie%5Cindex.html">Internet Explorer</a> | <a href="internet%5Cweb%5Cindex.html">Web Design</a> | <a href="internet%5Cwhat">What Is The Internet?</a> | <a href="internet\fp\index.html">Frontpage</a> | <a href="internet\dw\index.html">Dreamweaver</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="office%5Cword%5Cindex.html">Word</a> | <a href="office%5Cexcel%5Cindex.html">Excel</a> | <a href="office%5Caccess%5Cindex.html">Access</a> | <a href="office%5Cppt%5Cindex.html">Powerpoint</a> | <a href="office%5Coutlook%5Cindex.html">Outlook</a> |
</div>
<div id="subglobal4" class="subglobalNav">
<a href="#">Acrobat</a> | <a href="#">Photoshop</a> </div>
<div id="subglobal5" class="subglobalNav"><a href="psp%5Cpsp7%5Cindex.html">PSP7</a> | <a href="psp%5Cpsp8%5Cindex.html">PSP8</a>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="hardware%5Cbasics.htm">Basics</a> | <a href="hardware%5Cparts.htm">The Parts</a> | <a href="hardware%5Cbuild.htm">Building Your Own</a> | <a href="hardware%5Cproblems.htm">Problems</a> </div>
<div id="subglobal7" class="subglobalNav"><a href="win%5Cwin31%5Cindex.html">Windows 3.1</a> | <a href="win%5Cwin9xme%5Cindex.html">Windows 9x/Me</a> | <a href="win%5Cwin2k%5Cindex.html">Windows 2000</a> | <a href="win%5Cwinxp%5Cindex.html">Windows XP</a> </div>
<div id="subglobal8" class="subglobalNav">
<a href="#">Windows 3.1</a> | <a href="#">WIndows 9x/Me</a> | <a href="#">WIndows 2000</a> | <a href="#">Windows XP</a></div>
</div>
I've just copied straight from my site. You can make the CSS to what ever you want. That should work, It does for me
Have Fun
Dan
<edit> Nearly forgot, you need this as your body tag for it to work (oops)
<body onmousemove="closesubnav(event);">
Memory like a seive
</edit>
