Menu
I have a question that involves hiding and showing divs. I’m making popup menus (as the title implies) and I can’t get the second layer to work. By layer I mean I want a popup inside of a popup as to be able to navigate like so: School>Javascript>Alerts>Quiz. (this is an example)
Here is the code:
[CODE]
<html>
<head>
<style>
#popup {
height:400px;
width:400px;
border:solid;
border-color:#000000;
}
#navbar {
position:relative;
top:0px;
left:0px;
}
#menu1 {
position:relative;
left:0px;
top:0px;
width:100px;
height:114px;
visibility:hidden;
}
#menu2 {
position:relative;
left:100px;
top:-114px;
width:100px;
height:114px;
visibility:hidden;
}
#menu3 {
position:relative;
left:100px;
top:-228px;
width:100px;
height:114px;
visibility:hidden;
}
</style>
<title>Popup</title>
<script language=”javascript”>
function doShowHide(popupMenu) {
if (popupMenu == “menu1”) {
document.getElementById(“menu1″).style.visibility=”visible”;
document.getElementById(“menu2″).style.visibility=”hidden”;
document.getElementById(“menu3″).style.visibility=”hidden”;
}
if (popupMenu == “menu2”) {
document.getElementById(“menu1″).style.visibility=”hidden”;
document.getElementById(“menu2″).style.visibility=”visible”;
document.getElementById(“menu3″).style.visibility=”hidden”;
}
if (popupMenu == “menu3”) {
document.getElementById(“menu1″).style.visibility=”hidden”;
document.getElementById(“menu2″).style.visibility=”hidden”;
document.getElementById(“menu3″).style.visibility=”visible”;
}
}
function doHide(popupMenu) {
document.getElementById(popupMenu).style.visibility=”hidden”;
}
</script>
</head>
<body>
<!– Popup start –>
<div id=”popup”>
<!– Visible Menu start –>
<div id=”navbar”>
<table width=”200″ class=”popupsTable”>
<tr>
<td width=”100″>
<a href=”#” onMouseOver=”doShowHide(‘menu1’);”>Cat 1</a>
</td>
<td width=”100″>
<a href=”#” onMouseOver=”doShowHide(‘menu2’);”>Cat 2</a>
</td>
</tr>
</table>
</div>
<!– Visible menu end –>
<!– menu 1 start –>
<div id=”menu1″ onMouseOut=”doHide(‘menu1’);” onMouseOver=”doShowHide(‘menu1’);”>
<table width=”100%” class=”popupsTable”>
<tr>
<td>
<a href=”#” onMouseOver=”doShowHide(‘menu3’);”>Subcat[]</a>
</td>
</tr>
<tr>
<td>
<a href=”path02″>Subcat2</a>
</td>
</tr>
<tr>
<td>
<a href=”path03″>Subcat3</a>
</td>
</tr>
</table>
</div>
<!– menu 1 end –>
<!– menu 2 start –>
<div id=”menu2″ onMouseOut=”doHide(‘menu2’);” onMouseOver=”doShowHide(‘menu2’);”>
<table width=”100%” class=”popupsTable”>
<tr>
<td>
<a href=”path04″>Subcat4</a>
</td>
</tr>
<tr>
<td>
<a href=”path02″>Subcat5</a>
</td>
</tr>
<tr>
<td>
<a href=”path03″>Subcat6</a>
</td>
</tr>
</table>
</div>
<!– menu 2 end –>
<!– menu 3 start –>
<div id=”menu3″ onMouseOut=”doHide(‘menu3’);” onMouseOver=”doShowHide(‘menu3’);”>
<table width=”100%” class=”popupsTable”>
<tr>
<td>
<a href=”path04″>SubSub1</a>
</td>
</tr>
<tr>
<td>
<a href=”path02″>SubSub2</a>
</td>
</tr>
<tr>
<td>
<a href=”path03″>SubSub3</a>
</td>
</tr>
</table>
</div>
<!– menu 3 end –>
</div>
<!– Popup end –>
</body>
</html>
Thanks