1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HTML Links tree?

Discussion in 'HTML, Graphics & Programming' started by Johnny, 13 Jan 2006.

  1. 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.
     
  2. Jotun

    Mobster

    Joined: 11 Jun 2005

    Posts: 3,606

    Location: Liverpool

    something like this?
     
  3. Johnny

    Associate

    Joined: 2 Jan 2006

    Posts: 11

    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!
     
  4. Johnny

    Associate

    Joined: 2 Jan 2006

    Posts: 11

    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.
     
  5. Johnny

    Associate

    Joined: 2 Jan 2006

    Posts: 11

    Im still loosing my battle with this =(
    Anyone got any ideas? or an alternative solution?

    Thanks!
     
  6. Jake 2.0

    Banned

    Joined: 16 Dec 2002

    Posts: 10,237

    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: 16 Jan 2006
  7. robmiller

    Capodecina

    Joined: 26 Dec 2003

    Posts: 16,522

    Location: London

    Just use Javascript to hide the children so that they'll just get a plain ol' unordered list if they have Javascript turned off.