Tweet
Ok ladies and gents...
Let the smart people come out of the woodwork!! <PLEASE!>
link is: http://www.trinitylifedsm.org
I'll give you the code here as well and explain the problem
I haven't included the whole code but you can view my page at the above link to get the full idea.
Now - the problem as you will soon find after visiting the link is that if you mouseover the top nav menu a submenu will appear... HOWEVER, if you try to go to the submenu(sometimes you will make it sometimes you won't) it goes away... You can sometimes get to one of the submenu links but try to go to another one... It goes away. PLEASE SOMEONE HELP BEFORE I ADMIT MYSELF TO A MENTAL HOSPITAL!
This is the code that handles the menu and creates the submenu.
<script type="text/javascript">
<!--
var time = 50000;
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(){
for (var i=1; i<= numofitems; i++){
window['menuitem'+i].thediv.style.visibility='hidden';
}
}
// -->
</script>
This how I'm handling the mouseover on the main menu (by the way this is all CSS positioned)
<div id="globalNav">
<img alt="" src="images/gblnav_left.gif" height="32" width="5" id="gnl"> <img alt="" src= "images/glbnav_right.gif" height="32" width="5" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a>
<a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">About TLC</a>
<a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Ministries</a>
[B]This is how I'm handling the onmouseout of the div layers that hold the submenus.[B]
<DIV id="subglobal" onmouseout="closesubnav(event);">
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a>
</div>
Let the smart people come out of the woodwork!! <PLEASE!>
link is: http://www.trinitylifedsm.org
I'll give you the code here as well and explain the problem
I haven't included the whole code but you can view my page at the above link to get the full idea.
Now - the problem as you will soon find after visiting the link is that if you mouseover the top nav menu a submenu will appear... HOWEVER, if you try to go to the submenu(sometimes you will make it sometimes you won't) it goes away... You can sometimes get to one of the submenu links but try to go to another one... It goes away. PLEASE SOMEONE HELP BEFORE I ADMIT MYSELF TO A MENTAL HOSPITAL!
This is the code that handles the menu and creates the submenu.
<script type="text/javascript">
<!--
var time = 50000;
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(){
for (var i=1; i<= numofitems; i++){
window['menuitem'+i].thediv.style.visibility='hidden';
}
}
// -->
</script>
This how I'm handling the mouseover on the main menu (by the way this is all CSS positioned)
<div id="globalNav">
<img alt="" src="images/gblnav_left.gif" height="32" width="5" id="gnl"> <img alt="" src= "images/glbnav_right.gif" height="32" width="5" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a>
<a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">About TLC</a>
<a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Ministries</a>
[B]This is how I'm handling the onmouseout of the div layers that hold the submenus.[B]
<DIV id="subglobal" onmouseout="closesubnav(event);">
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a>
</div>
Comment