Two tier navigation by the simplest method

Apologies for the potentially very dumb post but having browsed the forum and The almost Complete Guide to Constructing Menus, I’m still no closer to finding the answer I’m looking for. Being new to MODx (but impressed and keen to adopt it), it may be staring me in the face but I just can’t see it.

My simple content structure has site sections which appear as tabs along the top and then in a bar under the tabs a list of sub-sections under the active tab. The structure is simply like this:

> Home (Area 1)
> News (Area 1 Section a)
> Events (Area 1 Section b)
> Fundraising (Area 1 Section c)
> Media (Area 1 Section d)
> About NF (Area 2)
> What is NF? (Area 2 Section e)
> Other strep infections (Area 2 Section f)
> Coping with NF (Area 3)
> Preventing and treating NF (Area 4)
etc.

Visually, it outputs like this:


If someone clicks on the tab for Area 1, I want this tab to:
- have a different class to show that section is active
- show the content of the Area 1 landing page
- In the bar under the tabs, show links to the sections under that area

I have all of these working but to get the sections to display, I have to hard code the document ID of the parent tab into the bar display block.

The code for the tab block is:

The code for the bar block is:

How can I code this so that if I click on the tab for Area 1, I’ll see the bar showing Sections a, b and c and if I click on the tab for Area 2, I’ll see the bar showing Sections d, e and f.

If you can help me get this working, there is a second part where if you click on one of the Section links, how do you then keep the same visual effect showing the parent tab as active (effectively driving the navigation structure from the child level up rather than parent down) but also adding a class to the section as active.

Any help would be most appreciated, thanks.

Hi,
That’s quite a nice fancy menu for a first MODx project... ambitious!

For starters, you can avoid using a hard-coded doc id by trying this type of thing in your call:
&startId=`[*parent*]`

Beyond that, it gets fairly gnarly, and doesn’t lend itself to a simple answer. I have made insane menus for clients (usually against my advice) that go to very deep levels that no one will ever look at. As often as not, I need special versions of templates that have Wayfinder calls coded for specific levels. This could probably be done other ways be using TV’s to indicate your level, or what-have-you.

The craziest thing is when every menu level looks different, then you’re not only doing special Wayfinder calls for it, but you’re getting into super-complex CSS cascade situations that are not for the inexperienced! But I have found that almost any bizarro menu can be done, though, with Wayfinder and CSS skills. It’s just more work.

I see you’ve been doing some templating of Wayfinder, that may help, and you’ll want to become familiar with the UltimateParent snippet, as it can be very handy. Parameters that may help include &level, which you’ve used, &displayStart, &hideSubMenus, etc.

Good luck!
D

D, thanks for the pointers. They’ve led me straight to the answer (well, an answer).

I’ve got two levels of template for top level nav pages and second level nav pages which are identical save for the nav calls.

For the top level pages and second level pages, the tabs are driven with a startID of 0


For top level pages, the child links are driven by the top level page which is selected


For the second level pages, the child links are driven by the parent of the active page to give the siblings for this item.


Crucially, the bit I stumbled across by accident was wrapping the dynamic instances in [! !] rather than [[ ]] (which I understand is for cached pages). I only tried this because I thought the old ’broken’ version was being cached, but it worked. Yay. I then changed it back to [[ and ]] when it was done expecting this would be faster and I’d only need to clear the cache when I added a new resource. Everything stopped working when I did this so I changed it back to [! !] and it’s fine again. My conclusion is that caching doesn’t work for dynamic blocks (until I learn otherwise) which may sound obvious, but I’ve worked with ColdFusion for many years where that would be possible.

I actually didn’t think the menu was anything out of the ordinary (the MODx manager works in an almost identical manner). Semantically, it would be fine to nest the second level <ul> inside the top level <ul> which I would have done for a vertical nav structure but with the horizontal layout it didn’t make so much sense (and I do try to avoid absolute positioning in CSS whenever possible).

Thanks again for your help, much appreciated.

P

Very interesting! Is there a chance you could post a link so it can be viewed in action??
:)

like this? http://modxcms.com/forums/index.php/topic,22737.msg184227.html#msg184227

http://beta.codeflow.nl/
http://bfenthusiasts.com/ports/plymouth.html (with first child redirect)

Thanks, Jan
Those are great, but I have been looking for a setup where the subnav <li>s align underneath the topnav <li>s (these are all align-left, it looks like).

I was also curious to understand this particular example; seeing things work makes it easier for me!

Wendy

Just plugging the template into the CMS and getting the navigation working so there’s not too much to see yet: http://www.chaffron.com/nfsuk

Quote from: sharkbait at Mar 21, 2010, 11:17 AM

like this? http://modxcms.com/forums/index.php/topic,22737.msg184227.html#msg184227

http://beta.codeflow.nl/
http://bfenthusiasts.com/ports/plymouth.html (with first child redirect)

Thanks for the suggestion. Not quite what I was looking for with this one but one to bear in mind for the future; and it’ll also make a little bit more sense as I become a bit more familiar with MODx and Wayfinder. Cheers