It's div's using a combanation of JavaScript and CSS..
You set the div's in css and use the js to call them.
In your CSS:
.menutitle{
cursor:normal;
margin-bottom: 5px;
background-color: #400040;
color: #ffffff;
width: 400px;
padding: 3px;
text-align: left;
font-family: tahoma, verdana;
font-size: 10px;
font-weight: normal;
border: 1px solid #700070;}
.submenu {margin-bottom: 0.5em; margin-left: 0.5em; }In your head part of the page:
<script type="text/javascript" language="JavaScript">
/************************************************************
* Switch Menu script - (c)2003 - 2005 PokemonPalace Network *
*************************************************************/
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
// change
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>then for your nav use:
<div id="masterdiv">
<table summary="Nav Table" width="130" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td valign="Top"><img src="images/nav_title.png" alt="Nav" />
<br />
<div class="menutitle" onclick="SwitchMenu('sub1')"> <img src="images/menu_open.gif" width="11" height="7" alt="Click to Open Menu" />Site Menu</div>
<span class="submenu" id="sub1">
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="index.php">PPN Home Page</a></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank">Message Board</a></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank">Message Board</a></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank">Message Board</a></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank">Message Board</a></div>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')"> <img src="images/menu_open.gif" width="11" height="7" alt="Click to Open Menu" />Pokmon Menu</div>
<span class="submenu" id="sub2">
<div style="margin-left: 5; margin-right: 3"><img src="http://pokemonpalace.net/images/menu_open_a.gif" alt="Menu"> <span class="navcolor">General Pokemon</span></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank"><b>Pokmon Community</b></a></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank"><b>Pokmon Community</b></a></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank"><b>Pokmon Community</b></a></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" /> <a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank"><b>Pokmon Community</b></a></div>
</span>
</td>
</tr>
</table>
</div>