Two related menus

Hello. I need some help.

I try to make two related menus: inner and outer. I use Wayfinder in both cases.
Menu 2 is a list of elements, which parent is one of Menu 1 item.

Menu 1:
CATEGORY 1
- subcategory 1(ACTIVE)
- subcategory 2

CATEGORY 2
- subcategory 3
- subcategory 4

CATEGORY 3
- subcategory 5

Menu 2:
- subcategory 1 item 1
- subcategory 1 item 2
- subcategory 1 item 3

The tasks is the following:
- where I select subcategory 1 from Menu 1, I should see Menu 1 -> CATEGORY 1 -> subcategory 1item being ACTIVE, also, the first element of Menu 2 (subcategory 1 item 1) should be active and it’s content should be displayed.
- where I select an element of Menu 2, active Menu 1 item should stay active

My documents tree in manager:
CONTAINER
- CATEGORY 1
- subcategory 1
- subcategory 1 item 1
- subcategory 1 item 2
- subcategory 1 item 3
- subcategory 2
- CATEGORY 2
- subcategory 3
- subcategory 4
- CATEGORY 3
- subcategory 5

I tried to use Wayfinder with activeParentRowTpl, but it changes CATEGORY 1, subcategory 1 and subcategory 2.
I think, it’s not to hard to complete this tasks, but I haven’t enough experience

Thank you for your help!

I don’t think that you need to use two menus for this (if I understood the task correctly). By default wayfinder will display all the active sub categories. So if you select subcategory 1 it should automatically open the sub category items to be displayed.

Wayfinder can apply an active class on all active menu items. If you are using custom tpl chunks you need to add the [+wf.classes+] to have the class show up. Here is an example:


Then you can style the look of the active menu item with the corresponding style for each level:

Thank you.

But my task is to make two menus in different places. I think I can’t use one snippet call to make two menus (maybe, it’s not true).
I have Menu 1 in the left column and Menu 2 in the right column. Menu 1 - a list of services (CATEGORIES) with subcategories. CATEGORY is not a link, subcategories is a list of links.

When I select one subcategory from Menu 1, I should build Menu 2 related with selected subcategory (it should contain elements from selected subcategory folder). My problem is that I can’t highlight current Menu 1 and Menu 2 item (selected item) at one time. I think I shouldn’t use tv’s for this task because there’s a way to make it using built-in variables (document structure).


Thanks again.

But my task is to make two menus in different places.

Ohhhhh, I misunderstood. You need two menus for this for sure.

What you need to do is to create the second menu and use the document’s parent as the startId. So for example if the ID for sub category 1 is 33 you would set the second menu with startId=`33` or startId=`[*parent*]`. One way to handle this dynamically is to use the UltimateParent snippet to find the parent of the document so you could have [!Wayfinder? &startId=`[[UltimateParent? &topLevel=`3`]]` &level=`1`!] will always return the third level menu. By default Wayfinder should set the active parent in the other menus to active as well as long as the [+wf.classes+] parameter is in the tpl chunks and there is an active style.

Hope I got it right this time.

Yes, this time you’re right.

I’ve made two menus, as you said, I used *parent* to set second menu startId. It works properly. But I can’t highlight Menu 1 active parent item, because Menu 1 has two levels. If I set activeParentRowTpl, Wayfinder sets parent and parent of parent style to my activeParentRowTpl template.

You can see example of my site here: http://nantour.ru/service/naming/acpects_1.html

Right column contains Menu 1 (CATEGORIES and subcategories).
Left column contains related Menu 2 (subcategory items).

I should hightlight both Menu 2 active item and Menu 1 active parent (only the nearest parent, active subcategory).

Also I should make redirect or something like it. If I select subcategory from Menu 1, I should see content from the first subcategory item if it exists, and subcategory item name should be hightlighted as usual.

Thank you for your help!

Interesting. I do this sort of menu all the time and it just seems to be the default way it works, I don’t remember needing to tell it to do anything special. I can see that you have custom tpl for the menus, I am guessing that the custom tpl is causing it not to work the way you expect. Please post the wayfinder call for the two menus.

BTW - very nice looking design

Menu 1:
[!Wayfinder? &outerTpl=`wf_service_outer` &rowTpl=`wf_service_row` &innerTpl=`wf_service_inner` &innerRowTpl=`wf_service_inner_row` &startId=`2` &level=`2` &activeParentRowTpl=`wf_tst` !]

Menu 2:
[!Wayfinder? &outerTpl=`wf_service_outer` &rowTpl=`wf_resume_row` &startId=`[*parent*]` &level=`1` &hereTpl=`wf_resume_here_row` !]

Chunks:
- wf_service_outer
<div class=’serv_block’>[+wf.wrapper+]</div>

- wf_service_row
<h2>[+wf.linktext+]</h2>[+wf.wrapper+]

- wf_service_inner
[+wf.wrapper+]

- wf_service_inner_row
<p><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></p>

- wf_tst
<h2>[+wf.linktext+]</h2>
<p>[+wf.wrapper+]</p>

- wf_resume_row
<p><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></p>

- wf_resume_here_row
<p><a href="[+wf.link+]" title="[+wf.title+]" class=’active’>[+wf.linktext+]</a></p>


I think I should experiment with wf_tst chunk. All I need is to make highlited only parent subcategory of current item.

Thank you wery much for your help. I start thinking about my problem another way, your comments are very helpful.

Can anybody help with my problem? Maybe, I shouldn’t use Wayfinder?

Maybe, anybody knows how to make "redirect" (when I select parent, I go automatically to the first child)?


Thank you.

Try the FirstChildRedirect snippet. I use it all the time.