Multi level menu - calling submenu items when clicked

I’ve got a 2000+ document site,  there’s a main horizontal menu at the top and for one of those main menu items a sub menu with 8 items appears to the right of the content.

Each of those 8 submenu’s contain very different information, there are between 20 - 500 items contained in up to 5 different submenus/levels.  I’ve got it all working using accordion which is cool, but the weight of the page from all those items being called at once (even if only 1 main submenu is ticked to show in menu) is just too much to be acceptable, especially for people on dial-up connections.

But it’s an information based site and it’s important that users have the ability to see/know what documents there are as much as reasonably possible within each main submenu directory so I was wondering if there was some way to have sublevel list items loaded (and therefore displayed) only when a parent has been click on, and when that item has been clicked (following normal accordion behaviour), any other sublevel item closes. 

I’d thought about using separate WF calls for each of the 8 submenu items, but I’m at a loss as to what to do after that.  Would I need to make separate WF calls inside of my chunks to call the next level of list menu items?

Or can someone come up with an idea of how to manage this? 

I feel like such a moron - &hideSubMenus



But, does anyone know how I could code this so when a parent is clicked rather than the whole page reloading only the menu regenerates to reveal the submenu items?

The latter sounds for me like an AJAX-call for the clicked submenu. Or you could use a frame to show the menu in. But I would do neither. Don’t your main menu documents have information for the user? Are they only containers for their sub-docs? I would re-think the structure of your documents.

I always prefer main menu docs with content rather than those without content. I know: In some cases, it just makes no sense. Then I coose between 2 alternatives:

1) Redirect the user to the first child (via [[firstChildRedirect]] snippet
2) Use the (empty) main menu doc as a table of contents. Can nicely be done with Ditto.

These are just my thoughts about user-friendly navigation, without knowing your excat needs

Greetings
Martin

Thanks FuryDE!

To be honest, this is such a beast of a project, I’ve never done anything that comes close to this before and that combined with my newness to MODx means I haven’t been exactly sure about the most effective way of tackling it, or how. One of my biggest gripes with websites is bad menu/navigation systems and for a site of this size and the intended (main) audience I’d really like to make sure I get it as ’right’ as is possible.

I’ve tried various configurations on a test install to try and determine what is going to work the best - I’ve looked at both empty containers with a redirect and content filled (with Ditto) ones and I’ll probably end up using both of those approaches (if I can) at various points in the menu.

I like the idea of the AJAX call very much and will look at implementing that for some/all of the clicked menu’s depending on what I end up finally deciding. Unfortunately it means yet another learning curve ... and my brain feels a bit fried at the moment LOL.

Don’t really need AJAX for it; that would make it very un-Accessible, anyway.

Just have a standard unordered list (or whatever structure you use for your menu) with the submenus and items hidden in CSS as usual, then use a bit of javascript and an "onclick" event. There are a ton of simple javascript based menus available that do exactly that; you would just need to tweak your Wayfinder templates to match the classnames and IDs the script you decide to use needs.

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

Hi sottwell,

I did originally get some great menu’s working using just CSS or JS to hide the items but the problem was all menu items were still being generated at output (they were only hidden) so I still had the issue of a high page weight/parse time.

Using the hidesubmenu’s is working well, only the most immediate menu items are being output - the AJAX would have been a nice solution but as you’ve correctly pointed out it isn’t the most accessible one.