collapsable menus?

Started by Lord Kokkei December 31st, 2005 12:55 PM
  • 564 views
  • 4 replies

Rukario

Banned

Somewhere in Ilex Forest
Seen April 6th, 2019
Posted March 17th, 2019
7,587 posts
20.7 Years
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="" />&nbsp;&nbsp;<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="" />&nbsp;&nbsp;<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="" />&nbsp;&nbsp;<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="" />&nbsp;&nbsp;<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="" />&nbsp;&nbsp;<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">&nbsp;&nbsp;<span class="navcolor">General Pokemon</span></div>
<div style="margin-left: 8; margin-right: 3"><img src="http://pokemonpalace.net/siteimages/spacer.png" alt="" />&nbsp;&nbsp;<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="" />&nbsp;&nbsp;<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="" />&nbsp;&nbsp;<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="" />&nbsp;&nbsp;<a class="top" href="http://pokecommunity.com/index.php?referrerid=2" target="_blank"><b>Pokmon Community</b></a></div>
</span>
</td>
</tr>
</table>
</div>
Age 62
Male
Melbourne, Australia
Seen April 26th, 2018
Posted June 9th, 2014
11,439 posts
19.7 Years
Gah, your code is a lot less convoluted than another script I've seen doing the same thing... the one I'm using on TPP at the moment... *saves*


"One reason why mathematics enjoys special esteem, above all other sciences, is that its laws are absolutely certain and indisputable, while those of other sciences are to some extent debatable and in constant danger of being overthrown by newly discovered facts."
Albert Einstein

"What science can there be more noble, more excellent, more useful for men, more admirably high and demonstrative than mathematics."
Benjamin Franklin

"Mathematics, rightly viewed, possesses not only truth, but supreme beauty – a beauty cold and austere, like that of sculpture, without appeal to any part of our weaker nature, without the gorgeous trappings of paintings or music, yet sublimely pure and capable of a stern perfection such as only the greatest art can show."
Bertrand Russell

avatar and signature by FoxHound

ANNOY ME AT YOUR PERIL. I am becoming increasingly tired of the unmanly elitism and closed-mindedness of certain members who shall remain unnamed.

Dragonfree

Teh Spwriter. :3

Age 33
Female
Iceland
Seen February 9th, 2020
Posted November 28th, 2012
1,290 posts
19.1 Years
Why the heck are you putting them in spans, though? Isn't it invalid HTML to put block-level elements inside inline elements?
~Butterfree/Dragonfree/antialiasis of The Cave of Dragonflies

Still not going to sprite for your fangame. Sorry, but I don't really sprite or give out permission for people to use my fake Pokémon anymore.