I have a left side navigation menu that I am having some issues with in terms of the submenu layers not coming to the top when they are set to visible.
First, here is a link to where I am setting this up.
http://www.carmelchamber.com/ccccindex.asp
I am generating the left menu and submenu from info in a DB. I will include some of the code below which shows my javascript code and the code for the layers. If you want to see how if all comes out you can visit the link and look at the source code.
******************************************************
<script language = "JavaScript">
<!--
var timer = null;
//var selected = new Array();
//var hilited = new Array(4);
//hilited[0] = -1;
//hilited[1] = -1;
//hilited[2] = -1;
//hilited[3] = -1;
function changeDiv(the_div, the_change) {
if (document.all) {
div_string = "window.document.all." + the_div + ".style";
// alert(div_string);
} else if (document.layers) {
div_string = "window.document." + the_div;
} else {
alert("sorry, this only works in 4.0 browsers");
return;
}
the_div = eval(div_string);
the_div.visibility = the_change;
the_div.zIndex=31;
cancelClearTime();
}
function closeAll() {
for (var loop=0; loop < div_array.length; loop++) {
changeDiv(div_array[loop], "hidden");
}
}
function cancelClearTime() {
if (timer) clearTimeout(timer);
timer = null;
}
function ClearTime() {
if (timer) clearTimeout(timer);
timer = null;
timer = setTimeout("closeAll()",2000);
}
function MouseOut(cdiv) {
ClearTime();
}
// -->
</script>
<!-- Set Style Information -->
<style type="text/css">
<!--
.on {
color:#FFFFFF;
cursor:pointer
}
.off {
color:#00808D;
cursor:default;
}
.menu {
WIDTH: 300px; POSITION: absolute; BACKGROUND-COLOR: #00808D
}
.submenu01 {
PADDING-LEFT: 6px; FONT-SIZE: 10px; WIDTH: 196px; COLOR: black; PADDING-TOP: 0px; FONT-FAMILY: arial; LETTER-SPACING: 1px; POSITION: absolute; HEIGHT: 18px; BACKGROUND-COLOR: #999999
}
-->
</style>
<%
' sqlStr = "Select * FROM tblWebSections"
' set rst1 = CCCCDBConn.Execute(sqlStr)
rst1.MoveFirst
topposition = 80
count = 0
subcount = 0
subdiv = 0
While NOT rst1.EOF
topposition = topposition + 19
sqlStr = "SELECT * FROM tblWebSubSections WHERE ParentSection = '" & rst1("SectionName") & "'"
set rst2 = server.Createobject("adodb.recordset")
rst2.cursorlocation = 3 'adUseClient
rst2.Open sqlStr, CCCCDBConn, adOpenDynamic, adLockOptimistic
If rst2.EOF Then
%>
<div id="top<%=count%>" style="position:absolute; top:<%=topposition%>px; left:3px; visibility:visible;">
<table width="104" cellspacing="0" cellpadding="0" bgcolor="#E2F4F5">
<tr>
<a href="<%=rst1("LinkPage")%>">
<td id="topitem<%=count%>" class="off" onmouseover="closeAll();this.className='on';this.style.backgroundColor='#7ECBD1';" onmouseout="this.className='off';this.style.backgroundColor='';" align="left">
<font size="2"> <%=rst1("SectionName")%></font>
</td>
</a>
</tr>
</table>
</div>
<%
Else
%>
<div id="top<%=count%>" style="position:absolute; top:<%=topposition%>px; left:3px; visibility:visible;">
<table width="104" cellspacing="0" cellpadding="0" bgcolor="#E2F4F5">
<tr>
<a href="<%=rst1("LinkPage")%>">
<td id="topitem<%=count%>" class="off" onmouseover="closeAll();this.className='on';this.style.backgroundColor='#7ECBD1';changeDiv('subdiv<%=subdiv%>','visible');" onmouseout="this.className='off';this.style.backgroundColor='';MouseOut(1);" align="left">
<font size="2"> <%=rst1("SectionName")%></font>
</td>
</a>
</tr>
</table>
</div>
<%
counter = 0
counter = rst2.RecordCount
menuheight = (19 * counter) + 4
If NOT rst2.EOF Then
menuwidth = 0
While NOT rst2.EOF
If Len(rst2("SubSectionName")) > menuwidth Then
menuwidth = Len(rst2("SubSectionName"))
End IF
rst2.MoveNext
WEND
rst2.MoveFirst
End IF
menuwidth = menuwidth * 6.7
subtopposition = 2
%>
<div class="menu" id="subdiv<%=subdiv%>" style="LEFT:107px; HEIGHT:<%=menuheight%>; WIDTH:<%=menuwidth%>; TOP:<%=topposition%>px; VISIBILITY:hidden; POSITION:absolute; z-index:<%=20 - subdiv%>;" onMouseOut="MouseOut(1);">
<%
While NOT rst2.EOF
%>
<table width="<%=menuwidth - 4%>" cellspacing="0" cellpadding="0" bgcolor="#E2F4F5" style="position:absolute; top:<%=subtopposition%>px; left:2px;">
<tr>
<a href="<%=rst2("LinkPage")%>">
<td id="subdiv<%=subdiv%>_sdivitem<%=subcount%>" class="off" onMouseOver="this.className='on';this.style.backgroundColor='7ECBD1';changeDiv('subdiv<%=subdiv%>','visible');" onMouseOut="this.className='off';this.style.backgroundColor='';" align="left">
<font size="2"> <%=rst2("SubSectionName")%></font>
</td>
</a>
</tr>
</table>
<%
subtopposition = subtopposition + 19
subcount = subcount + 1
rst2.MoveNext
WEND
rst2.Close
Set rst2 = Nothing
subdiv = subdiv + 1
%>
</div>
<%
End If
count = count + 1
rst1.MoveNext
Wend
rst1.Close
set rst1 = Nothing
topposition = topposition + 40
%>
************************************************
If you load the page and move your mouse down to 'Membership' the right side submenu will become visible. Move your mouse down to 'Silver Member'. You will see that the rollover effects and pointer stop. This is because the menu item 'Events' has a submenu for it and the top is on the same level as 'Silver Member'. For some reason when I bring up the sub menu for 'Membership' it does not come to the front, or on top of the other layers.
O have tried setting the z-index in the <div> element as well as in the javaascript code setting the zindex when a layer is made visible but I am missing something somewhere.
If you need more info, let me know. Anyone who can help with layer ordering, I thank you for the assistance.
Ian