|
|
Tree-based Navigation Help ...
|
|
|
|
Mac Elite
Join Date: May 2002
Status:
Offline
|
|
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!
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Nov 1999
Status:
Offline
|
|
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.
|
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
|
|
|
|
|
|
|
|
Mac Elite
Join Date: May 2002
Status:
Offline
|
|
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?
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: May 2002
Status:
Offline
|
|
Something like this:
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Nov 1999
Status:
Offline
|
|
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.
|
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
|
|
|
|
|
|
|
|
Mac Elite
Join Date: May 2002
Status:
Offline
|
|
Or would iFrames and JS be more efficient?
I'll take another look at the CSS idea.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: May 2002
Status:
Offline
|
|
If I did use iFrames, how would I get the them to resize with the content?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|