Page 1 of 1

Html Menu with php coding

Posted: Tue May 23, 2006 10:46 pm
by apollovega
Hello fellow Php'ers. Since you all did a wonderful job helping me last time on a problem, I hope you can help me once again :-)

What I need isn't exactly simple to type out, so I might repeat myself a few times to get the point accross. You see, I want to have left menu on my website that minimizes and maximizes based on what you click. Say for example, you have 3 main menu options 1) Warcraft 2) Guild 3) Misc. Now in each of those main menu options, there's sub links where you would actually click to select the page you want to visit. It might look like this

Warcraft
Warcraft Lore
Warcraft Guilds
Guild
Information
Members
Misc
Utilities
About


Now, when you in the "Warcraft" section the "Guild" and "Misc" Sections are hidden. But when you click the header ("Warcraft" or "misc" or "guild") it minimizes the current section and then maximizes the newly selected topic.

It's kinda easy to figure out, however I seem to be getting more stuck with it as I go along. Basically what I'm looking for is simply a blueprint on how to achieve this (You don't have to include code by any means). I can't seem to think outside the box to even start to map out how this would work. I'm still stuck inside the box :P
Anyways, I'm just looking for a little guidance or direction. Thank you kindly everyone. Have a good night!

here

Posted: Tue May 23, 2006 10:59 pm
by Milan
here is a javascript example

Code: Select all

<div id=header1 onclick=expand(header1)><table border=0><tr><td style='width:150;background-color:gray'>+ First Group</td></tr></table></div>
<div id=header2 onclick=expand(header2)><table border=0><tr><td style='width:150;background-color:gray'>+ Second Group</td></tr></table></div>
<div id=header3 onclick=expand(header3)><table border=0><tr><td style='width:150;background-color:gray'>+ Third Group</td></tr></table></div>
<P>&nbsp;</P>
<script>
var expanded1=false
var expanded2=false
var expanded3=false
function expand(who)
{
if(who==header1)
	{
	if(expanded1==false)
		{
		who.innerHTML=who.innerHTML="<table border=0><tr><td style='width:150;background-color:gray'>- First Group</td></tr><tr><td style=width:150;background-color:c0c0c0><a href=''>link1</a><br><a href=''>link2</a><br><a href=''>link3</a></td></tr></table>"
		expanded1=true
		}
	else
		{
		who.innerHTML="<table border=0><tr><td style='width:150;background-color:gray'>+ First Group</td></tr></table>"	
		expanded1=false
		}				
	}
else if(who==header2)	
	{
	if(expanded2==false)
		{
		who.innerHTML=who.innerHTML="<table border=0><tr><td style='width:150;background-color:gray'>- Second Group</td></tr><tr><td style=width:150;background-color:c0c0c0><a href=''>link4</a><br><a href=''>link5</a><br><a href=''>link6</a></td></tr></table>"
		expanded2=true
		}
	else
		{
		who.innerHTML="<table border=0><tr><td style='width:150;background-color:gray'>+ Second Group</td></tr></table>"	
		expanded2=false
		}				
	}
else if(who==header3)	
	{
	if(expanded3==false)
		{
		who.innerHTML=who.innerHTML="<table border=0><tr><td style='width:150;background-color:gray'>- Third Group</td></tr><tr><td style=width:150;background-color:c0c0c0><a href=''>link7</a><br><a href=''>link8</a><br><a href=''>link9</a></td></tr></table>"
		expanded3=true
		}
	else
		{
		who.innerHTML="<table border=0><tr><td style='width:150;background-color:gray'>+ Third Group</td></tr></table>"	
		expanded3=false
		}				
	}	
}
</script>

Posted: Tue May 23, 2006 11:29 pm
by apollovega
Oh wow, that's awesome. Thank you kindly! And to think all I was looking for was a step in the right direction :-)

Thank you again, I'll try it out right away!

Posted: Tue May 23, 2006 11:30 pm
by apollovega
Oh wow, that worked quite well, I'm amazed.. And so well organized. I thank you from the bottom of my heart.

Posted: Wed May 24, 2006 12:16 am
by Milan
we all all here to help each other!