Hiding/Revealing left column submenu items with Wayfinder

Revo 2.1.3
Wayfinder 2.3.1
PHP Version 5.2.10

How do I go about doing something like this?

I have a site with a main navigation along the top right (showing on every page), which contains some top-level pages.

I also have a secondary menu system along the left column (also showing on every page) which has some second-tier pages. Each of these second-tier pages has sub-pages under them.

What I am trying to accomplish is to make each of the left-column menu items expand or contract, revealing the underlying left-column submenu items, as you click on the left column menu items. These items then hide when you click on another left menu item, revealing the submenu items under that. I don’t mean any kind of jquery accordian effect, where the thing expands on hover or anything. The submenu items reveal only as long as you are within a page within the particular container. Keep reading and maybe I’ll make more sense...

I have had some success with this by following the tutorial on the Wayfinder PDF Usermanual, which you can download here:

http://modxcms.com/forums/index.php?action=dlattach;topic=34176.0;attach=9315

Basically, I did the following:

1. Created each of the left column menu items as containers, which contain each of their submenu items.

2. Each of these containers are, in turn, contained within an overall left-column container, which I have called ’Left_Column_Main_Menu_Container’. Actually, this long-named container will not be seen online...I just wanted it to serve as a container and to provide an ID number (you’ll see why in the next step). The ID number for this container is 11, by the way.

3. The left column wayfinder call looks like this:

[[Wayfinder? &startId=`11` &outerTpl=`menuContainer` &level=`2` &hideSubMenus=`TRUE`]]

I don’t think it matters with my issue, but the ’menuContainer’ template contains this:
<ul[[+wf.classes]]>[[+wf.wrapper]]</ul>

4. All of this works great to a certain extent. The menu on the left reveals the submenu items of the menu item you click on and hides the other ones with no problem...as long as you are viewing one of the pages linked from the left hand menu. As soon as you go to a page that is not linked to from the left menu system (such as one of the top level menu items along the top of the page), the whole left menu gets hidden.

Yes, I know it has to do with the &hideSubMenus=`TRUE` thing, which is faithfully hiding the menu items in the containers that make up the left column items.

So...

If my system above is not how one goes about creating the effect I want, how would you accomplish it? Am I close to accomplishing what I want with the system I outlined? What am I missing?

Please note:

1. Each main item on the left menu has to show on all the pages of the site.
2. Each submenu item under each left menu item must be hidded until the main left menu item is selected.
3. Each submenu item that was revealed must hide when another left menu item is selected and the ones under the next selected ones revealed.

You get the picture.

Any help is appreciated.

I had the same problem when migrating a site to Revo. What I did was to use a separate Wayfinder call, using the same templates, for pages outside the tree. For that call, I set &level=`1` and left &hideSubMenus=`FALSE`.

&hideSubMenus=`FALSE`

Better use (See https://github.com/splittingred/Wayfinder/issues/29

What is the relation between the [tt]top-level pages[/tt] in your main navigation and the [tt]second-tier pages[/tt] in the left column menu?
Where is the [tt]Left_Column_Main_Menu_Container[/tt] in the resource tree? Is it on the same level like the [tt]top-level pages[/tt] ?
We could help you better if you show us the tree.

Quote from: ottogal at Aug 08, 2011, 09:33 PM

What is the relation between the [tt]top-level pages[/tt] in your main navigation and the [tt]second-tier pages[/tt] in the left column menu?
Where is the [tt]Left_Column_Main_Menu_Container[/tt] in the resource tree? Is it on the same level like the [tt]top-level pages[/tt] ?
We could help you better if you show us the tree.

Thanks, everyone, for responding.

Ottogal: The Left_Column_Main_Menu_Container is located on the top level of the tree...the same level that you would see ’Home’ on. Then, within that container, you have a number of containers (what I’m using to show as the main left column menu items). In turn, inside those containers, are all the hide/reveal submenu pages.

so, I have something that looks like:

Home
Employment
Contact Us
Left_Column_Main_Menu_Container
About Us
About Us Submenu page 1
About Us Submenu page 2
Etc, etc
Services
Resources
Clinics

BTW, changing &hideSubMenus=`FALSE` to &hideSubMenus=`0` had no effect in my case. Actually, having the setting at `0` (or `FALSE`) made all the submenu items visible at the same time. Setting it to `1` made the system work, but only if you happen to be visiting one of the pages living within the ’Left_Column_Main_Menu_Container’ container. If you go outside of that container, such as going to the ’Contact’ page (see tree above), all the left column menu items hide, including the ’About Us’, ’Services’, etc. level ones. Just an empty space where a menu should exist.

What should happen is that when the ’About Us’ link is selected the ’About Us’ submenu pages reveal. They stay revealed as you select any of those ’About Us’ submenu items...any pages having to do with the ’About Us’ container. When you then select ’Services’, the About Us submenu pages hide and the ’Services’ submenu pages reveal and stay revealed as you select your way within any of those submenu pages, etc.

Quote from: fr33jung at Aug 08, 2011, 03:29 PM

I had the same problem when migrating a site to Revo. What I did was to use a separate Wayfinder call, using the same templates, for pages outside the tree. For that call, I set &level=`1` and left &hideSubMenus=`FALSE`.

Can you clarify this a bit more, freejung? What I have now are two separate Wayfinder calls, which I think might be similar to what you are referring to. The main nav along the top of the page is a simple, top-level call that looks like:

...Nothing fancy.

The one I’m having trouble with is located at a different location within my site template (the side column) that looks like:



...as provided in this thread. Is that what you mean by two separate calls? Or, did you have different page templates for each submenu level page and provide different Wayfinder calls to each somehow? Sorry for my confusion.

hi,

won’t be able to help about wayfinder in Revo but it seems to me that Evo or Revo doesn’t matter.
I have a website with the kind of situation you describe, submenu visible only if concerns the current container and i did this simply with css...
i suppose in Revo as in Evo way finder puts an active class to the current... active page/container, then depending on you menu depth but

should do the trick, no ?

Have swing

Quote from: virtualgadjo at Aug 09, 2011, 10:42 AM

hi,

won’t be able to help about wayfinder in Revo but it seems to me that Evo or Revo doesn’t matter.
I have a website with the kind of situation you describe, submenu visible only if concerns the current container and i did this simply with css...
i suppose in Revo as in Evo way finder puts an active class to the current... active page/container, then depending on you menu depth but

li ul { display: none; }
li.active ul { display: block; }
/* to be adapted to fit your menu structure and depth */

should do the trick, no ?

Have swing

Yes! It absolutely did do the trick! So elegant, obvious and simple... I’m ashamed I didn’t think of it myself! Thank you, virtualgadjo. The only thing I want to add is to make sure that this is set as it is shown: &hideSubMenus=`0` Make sure it is set to ’0’. I think you can even leave it out...I believe it is the default setting if you don’t include it. Correct me if I’m wrong.

Again, thank you to all.

&hideSubMenus=`0` .... I believe it is the default setting if you don’t include it.

Yes, that’s true, so you can leave it out.

In the case of [tt]&hideSubMenus=`1`[/tt] , the behaviour you described is just the way [tt]&hideSubMenus[/tt] is working:

There will be displayed

• the immediate children of the actual page (but not its "grand children")
• all the "sisters" of the actual page, but not their children
• all the "aunts" of the actual page, but not their children
• and so on up the tree (as long as we are below the &startId )

hi,

:) glad it worked for you, i do share the KISS principle (the last S being for me of course, don’t worry )

about that hidesubmenu thing, once more even if i know wayfinder quite well in evo i don’t know what the differences are in Revo but according to what ottogal says the default behaviour seems to be the same as in Evo.

Now, when i do not want submenu, actually i must say i usually use the level param. &level=`1` will only build a... one level menu, no submenus to deal with and if i want submenus to play with, then level=`2` or more and then here come js and/or css depending on what i need.

Have swing