[headbirth]

Hi, I'm looking for an easy method of implementing a tree navigation.

Here's my old site which I'm going to update the look and refine the navigation on.

http://home.earthlink.net/~headbirth

If you go to the scenarios section you'll see some case studies which I was considering placing all on one page. Currently when the magnify glass is clicked a new page loads with the sample. I was thinking it might be nicer to simply have the entry open up or close like a tree-based navigation does (i.e. Finder list view) instead of loading another page. This way the user can leave branches open and easily find their way back to them.

So, what is the best way to implement this. Is it usually done totally with JS or can it be accomplished with CSS as I think is done on this site: http://www.csszengarden.com/

Any help you can pass my way would be greatly appreciated!

[Millennium]

If you want to use clicks to trigger the show/hide behavior, then there is no way around JavaScript. However, you can use CSS to cut the JavaScript to a bare minimum.

What I would recommend is to take a looc at [url=http://www.meyerweb.com/eric/css/edge]Eric Meyer's site, particularly his Pure CSS Menus and Pure CSS Popups demonstrations. By itself, this will not do what you want, but the basic principles will get you most of the way. If you structure your scenarios in a similar manner to the Popups and Menus demos (there should be no need to touch the rest of the page, so you won't need to do a redesign or anything like that), then you should be able to use one line of JavaScript to implement the show behavior, and another line for the hide.

[headbirth]

Hmmm .... not sure that's what I was thinking. It doesn't shift the content below it. Seems to be more like a pulldown menu.

I ran across this and was wondering if I could modify this to work.

http://javascript.internet.com/foldertree/

What do you think?

[headbirth]

Something like this:

[Millennium]

Originally posted by headbirth:
Hmmm .... not sure that's what I was thinking. It doesn't shift the content below it. Seems to be more like a pulldown menu.

That's how Meyer implements it, but the same ideas can be used for other things. Consider the Pure CSS Popups demo; that one might be easier to adapt.

[headbirth]

Or would iFrames and JS be more efficient?

I'll take another look at the CSS idea.

[headbirth]

If I did use iFrames, how would I get the them to resize with the content?