Handling Multiple Nested Navigational Structure

[ecsyle]

Or something like that...

This project requires some rather deeply nested cateogries.

parent > child > child > child > child > n

I have that part under control. What I don't have under control is how to display the hierarchy to the user. My initial thought was to use a series of nested unordered lists and some fancy styling, but the code to generate the lists was ridiculous. It is extremely inefficient. So I need a better solution.

1. Display in the navigation only the top level sections. When a user navigates to a section, show the children sections below, like reuters.com. On each page then, I would need some sort of table of contents, some way to link to other articles / sections.

2. Do not let the client have nested sections.

I do not like number 2. And I cannot think of another way to do this.


top level section1
section a
section 1a
section 2a
section 3a
section b
section c
section d
top level section2
top level section3
top level section4
top level section5

breadcrumb: > top level section1 > section a > section 1a

As you can imagine, the nested lists could get out of control quickly.

Any thoughts? I am looking around online, but haven't found much in regards to this. Makes me think that this is not the solution and I am looking in the wrong place.

[flutterby nut]

oh joy!...had recent experience with this...

i ended up using this guy's original ala article to build mine...only needed one child... http://www.nickrigby.com/article/25/ ...he has a more recent update with additional children now...

you might also check out: http://www.seoconsultants.com/css/menus/horizontal/ ...this is tanfa's menu...i found the code a little daunting myself, but you're more experienced, so it shouldn't be too bad...

you can also download PluginLab for dreamweaver...

or look for brother cake...he sells licenses for his code, if you want to go that route...

i also played around with yadm (yet another dynamic menu) css and javascript code...

that's the extent of my research...have fun!

[ecsyle]

As far as usability goes, do you think having a large nested list would be the way to go? I am not worried about creating the code and layout for it, i have a decent understanding of html and css. I am concerned about usability. The site has to be easy to navigate, easy to read, and accessible. Those css menus really only work up to one level deep in my opinion.

Those css menus do not hold 'state'. Meaning, if I click on a link that is 3 levels deep, i will not get a visual of that in the menu when the new page loads. It will revert back to collapsed and hidden menu, requiring the user to remember how they got there. The use of a breadcrumb will definitely help of course, but the problem remains. I do not know how to handle a deeply nested navigational structure.

[EC]

I personally like clicky-showy.

[EC]

I have seen clicky-showy that holds state, btw. I can find it for you if you're interested in considering it.

[flutterby nut]

it does present usability problems...and javascript is required to make it work in ie...if js is turned off, menu just sits there...and they have an annoying habit of snapping closed if you're not right on...if you only go on child deep it's not so bad...maybe two...wouldn't go deeper...of course, folks can alway reach for the back button to return to the previous page...is frames an option?...i've seen nav done that way too...a real quandary...

[flutterby nut]

I have seen clicky-showy that holds state, btw. I can find it for you if you're interested in considering it.

i like that option myself, but was never able to find anything on how to do it...i'm interested if ecsyle isn't...lol ;)

[ecsyle]

It can't rely on javascript for functionality. The site has to pass ADA compliancy.

[JPnyc]

You could use multiple DHTML menus, that's a common way of dealing with this. Either the unfold on mouseover deal, or the collapsing/expanding kind that you click on a +/-

Ok if it can't solely rely on JS, then you could use a CSS menu that only uses JS for IE.

[ecsyle]

I am thinking that I just have to go back to the drawing board and rethink the organization of the sites content.

Thanks for all the suggestions :)

[EC]

i like that option myself, but was never able to find anything on how to do it...i'm interested if ecsyle isn't...lol ;)

I haven't seen it without js, but I also haven't seen the same problems I have with other js menus. For the life of me I can't find the one that held it's state from page to page. I could have sworn I found it on dynamic drive though.

http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

Edit -- um, duh. This is the menu, if I had read the big shiny "NEW" paragraph. lol

New: Switch Menu now supports persistence (so it remembers which menu item was last expanded) whenever you revisit the page. To sweeten the deal, you can choose between "sitewide" and "local" persistence, with the former remembering the menu state across your entire site. This is useful if you have the exact same Switch Menu script on multiple pages on your site (ie: as a navigational bar), and it makes sense for the persistence to last from page to page.

[flutterby nut]

sweet!...got it bookmarked...thanks!

[EC]

shwelcome. :)

I used this menu for a couple of different things. It's ugly out of the box, but with CSS it's pretty sweet.