Wayfinder Cross-menu highlighting help

6 Posts

simonjs Reply #1, 19 years, 5 months ago

Hope there is someone out there who can help. I need help with Wayfinder.

The document structure is as follows:

Home
Services
Training

Research
[list]
[li]Child Document 1
Child Document 2

[/li]
[li]News[/li]
[li]About Us[/li]
[li]Contact Us[/li]
[/list]

The scenario is that my client didn’t want drop-menus so i have had to set up sub-menus on certain parent pages in order to access the child documents contained within it.

For example: the ’Research’ page would have a submenu displayed on it which uses wayfinder to build a list of child documents; in this case ’Child Document 1’ and ’Child Document 2’.

I have also set something up so that when you are viewing a child document, these also display sub-menus that go up to the current documents parent and select it’s children.

So for example: If you are viewing ’Child Document 1’ a sub-menu would be displayed that finds the parent of ’Child Document 1’ (’Research’) and displays it’s children (’Child Document 1’, ’Child Document 2’)

My problem is, when a child is selected, the menu highlighting only highlights the current document on the sub-menu and doesn’t go all the way up the tree. See screen-shot below:

The highlighted item in the main horizontal menu should look like the one in the red box as it does on all of the parent documents when they are selected. The highlighted items have a universal class (’current’) which is used with hierarchical css to create the different looking menu highlights.

Is this perhaps because I’m using separate menu entity’s?

I have tried all the tricks in the wayfinder documentation book and don’t know where else to go with this. Any help would be really appreciated!! grin

(please excuse me not linking to the site but as it is for a client, it remains privileged)

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 19 years, 5 months ago

Make a TV with a default of @INHERIT. Then, for each parent document, edit the TV and put a Wayfinder call with the startId set to that document’s ID. Now that document and all of its children will have the appropriate sub menu.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

6 Posts

simonjs Reply #3, 19 years, 5 months ago

I think I may not have explained properly, what I have in place as far as menus and sub-menus go works fine and they all build correctly,

it’s just the visual high-lighting all the way up the tree that is not working, which is what I’m asking about

6 Posts

simonjs Reply #4, 19 years, 5 months ago

So does anyone have any ideas? sad

2,204 Posts

Dimmy Reply #5, 19 years, 5 months ago

are you using wayfinder 2? if zo could you post your config file?

if not did you set the here class? &hereClass=`here` (this is not the same as &activeClass)
&hereClass wil be set on all document above the selected (&activeClass)

this way the top item wil be selecten when a child document is selected see http://www.everyonecan.nl/ons-project.html

follow me on twitter: @dimmy01

6 Posts

simonjs Reply #6, 19 years, 5 months ago

Hi,
Yes, i’m using Wayfinder 2.0 and the config file is just the default (blank), as i use template chunks instead.

That website you pointed me to seems to have it working nicely! exactly what i’m looking for!

I have set:

&hereClass=`current`

My Wayfinder call for the top (horizontal) navigation is:

[!Wayfinder? &startId=`0`  &level=`0` &outerTpl=`navOuter` &rowTpl=`navRow` &parentRowTpl=`navRow` &hereTpl=`navHere` &parentRowHereTpl=`navHere` &hereClass=`current` &hideSubMenus=`true`!]

and the call for the side (vertical) navigation is:

[[Wayfinder? &startId=`[*parent*]` &level=`0` &hereClass=`current`]]

I don’t see what could be happening huh

Thanks

2,204 Posts

Dimmy Reply #7, 19 years, 5 months ago

what does your navRow looks like?

follow me on twitter: @dimmy01

6 Posts

simonjs Reply #8, 19 years, 5 months ago

Ok here’s what’s in my template chunks:

navRow:

<li><a href="[+wf.link+]" title="[+wf.title+]" ><span>[+wf.linktext+]</span></a></li>

navHere:

<li class="current"><a href="[+wf.link+]" title="[+wf.title+]" ><span>[+wf.linktext+]</span></a></li>

navOuter:

<ul>[+wf.wrapper+]</ul>

Thanks for your help. wink

6 Posts

simonjs Reply #9, 19 years, 5 months ago

fixed! i hadn’t used the [+wf.classes+] ph assuming that Wayfinder inserted the classes automatically.

Note to self: don’t be such an idiot! rolleyes

Note to anyone else having this problem: don’t forget [+wf.classes+] grin