HTML Links tree?

Johnny

Johnny

Johnny

Associate
Joined
2 Jan 2006
Posts
11
How do I make a link so when you click on it, it opens up and displays a list of links? (like a tree structure)

For example I have:

Cars
Next Link
Another Link category

Which when Cars is clicked on opens up as:

Code: 
Cars
   Fast Cars
   Big Cars
   Yellow Cars
Next Link
Another Link category
etc

And then if you click Cars again it closes the tree.

Im not sure if this can be done with just HTML or if it needs javascript too.

Thanks very much for any help or pointers.
 
Yes, that functionality, but using the text as the target and not the +/- image.
Ill see if I can edit that code to work. Thanks for reply!
 
Well from that link I have managed to windle the code down to:

Code: 
<html>
<head>
<title>Expanding Menus Test</title>
<style type="text/css">

.submenu {
    display:none;
}


</style>

<script language="JavaScript">
function showMenu( divNum )
{
    if (getIdProperty( "s" + divNum, "display") != "block" )
    {
        setIdProperty("s" + divNum, "display", "block");
    }
    else
    {
        setIdProperty("s" + divNum, "display", "none");
    }
}

setBrowser();

</script>

</head>

<div>
<a href="javascript:showMenu(0);">Search Engines</a>
</div>
<div class="submenu" id="s0">
<a href="http://www.google.com/">Google</a><br>
<a href="http://www.yahoo.com/">Yahoo!</a> <br>
<a href="http://www.excite.com/">Excite</a> <br>
<a href="http://www.lycos.com/">Lycos</a>
</div>

<div>
<a href="javascript:showMenu(1);">Web Design</a>
</div>
<div class="submenu" id="s1">
<a href="http://www.zeldman.com/">Zeldman</a> <br>
<a href="http://www.asktog.com/">Ask Tog</a> <br>
<a href="http://www.useit.com/alertbox">Jakob Nielsen's Alertbox</a> <br>
<a href="http://www.webpagesthatsuck.com/">Web Pages That Suck</a>
</div>

<div>
<a href="javascript:showMenu(2);">Digital Photography </a>
</div>
<div class="submenu" id="s2">
<a href="http://www.steves-digicams.com/">Steve's Digicams</a> <br>
<a href="http://www.imaging-resource.com/">Imaging Resource</a> <br>
<a href="http://photo.askey.net">Digital Photography Review</a> <br>
<a href="http://catcode.com/digpix">Eisenberg's Photo Gallery</a>
</div>

</html>

However when I click a link it doesn't expand. I think this is because I have taken this out:

Code: 
if
document.images["i" + divNum].src = "../minus.png";
else
document.images["i" + divNum].src = "../plus.png";

from the if/else javascript statement. How am I able to make it so its text that you have to click instead of an image to expand? Is it even possible?

I think a way around this would be to make the links images, but that's not really pratical.

Again any help would be great.
 
what happens if the user has javascript disabled?

i would do something like giving the submenus an id (in css) and then when user clicks on the menu change the css functionality so that the submenu will show kinda like:

<ul id="whatever>
<li>hello
<li>what

css will be:

#whatever {
<?php echo $_SESSION['whatever'] ?>

}

and on the page that needs to have submenu open put:
$_SESSION['whatever'] = "display:inherit;"
 
Last edited by a moderator:
You must log in or register to reply here.
Back
Top Bottom