Answered Wayfinder - Two separate menus. Help please

Hi

Can any of the wise people here help me with an issue over a vertical menu and a horizontal menu. I've searched for a whole day and can't find a solution. Plenty about multi levels though!!

Currently, www.bulgallery.bg has all of the pages on both menus. I would like 'Paintings', 'Sculpture' etc on the left and 'Home', 'About', etc on the top.

The two Wayfinder elements in my template are

and
.

How do I tell a page to be in only one menu.

Many, many thanks.

Keith


[ed. note: keithbrook last edited this post 14 years ago.]

Wayfinder by default, outputs a vertical menu.

Use CSS to style the menu horizontally. There's a lot of examples out there of both types of menus, you'll have to apply it to the default wayfinder output with chunks, or you can define the individual classes in the Wayfinder snippet call with the corresponding parameters.

See: http://rtfm.modx.com/display/ADDON/Wayfinder

To use Wayfinder determine your css classes, you can use these parameters in your Wayfinder call:

Parameter Description
Default
&firstClass
CSS class for the first item at a given menu level.

&lastClass
CSS class for the last item at a given menu level.
last
&hereClass
CSS class for the items showing where you are, all the way up the chain.
active
&selfClass
CSS class for the current item.

&parentClass
CSS class for menu items that are a container and have children.
parent
&rowClass
CSS class denoting each output row

&levelClass
CSS class denoting every output row level. The level number will be added to the specified class (level1, level2, level3 etc if you specified 'level').

&outerClass
CSS class for the outer template.

&innerClass
CSS class for the inner template

&webLinkClass
CSS class for weblink items.

Use the above parameters to assign classes from your stylesheet.

OR...

Use a stylesheet only and assign classes based on the Wayfinder output to style the menu (and/or create a horizontal menu with css) based on defaults and your custom chunks:

create chunks for outerTpl, rowTpl, and innerTpl - see documentation for examples.

The Wayfinder call is such as this:



where &level=`1` will output only the top level resources (no submenus). &level corresponds with whichever level the menu is in, so for all levels (show all submenus/pages) you will omit this parameter because it's defaulted to 0. For menus that start in a sub level, count from the Web context down the tree to your level, and use that number.

i.e. if your tree looks like this (ID's for reference only):

Web (0)
=> Home Page (1)
=> Contact Page (2)
=>=>Contact Joe (6)
=>=>Contact Mary (7)
=>=>Contact Harry (17)
=>About Page (3)
=>Our Stuff (4)
=>=> Blue Stuff (9)
=>=>=>Adult Blue Stuff (16)
=>=>=>Boy Blue Stuff (11)
=>=>=>Girl Blue Stuff (12)
=>=>Purple Stuff (10)
=>=>=>Adult Purple Stuff (15)
=>=>=>Boy Purple Stuff (13)
=>=>=>Girl Purple Stuff (14)



Then to get a menu for just Joe, Mary, and Harry use this Wayfinder call:


To show the Our Stuff child pages, and their child pages with an Our Stuff Heading ( not a link) use:



To show only the first item of each level (the adult stuffs and not the girl and boy stuff), use &limit=`1` to tell Wayfinder to only process the first item per level.

The styling via CSS obviously is not a problem, since it looks fine (nice graphic design!).

You could use the property &excludeDocs to ban individual pages from the output.

For the horizontal menu:
For the vertical menu:

If you need/want to be more flexible I could imagine a TV solution. (Assign two TVs to the template, named "in_hmenu" and "in_vmenu", so you can set for each page individually if it belongs to any of the menues or not.)

Many thanks to Frogabog and Ottogal for your input.

Reading your suggestions makes me think I haven't explained myself very clearly.

The two menus are separate but I believe you may think that clicking on a top menu item then opens a new left menu. This isn't the case (although it's given me food for thought!!).

I've put straight html up on www.artistic.bg where you can see how the menus perform. I want all first level menus to be displayed all the time.

In effect they're just one big menu with half down the side and half along the top. Called hmenu and vmenu!!

The top menu is for technical stuff and the left menu is for customers to define their shopping choices.

Therefore I just want every page to have its menu appear either on bul-hmenu OR on bul-vmenu but not both.

I think Ottogal was close with the suggestion of TVs but I'm clueless about these.

Have a look at www.artistic.bg and tell me what you think.

Nazdrave as we say in Bulgaria!!

Keith




[ed. note: keithbrook last edited this post 14 years ago.]

I had a brainwave.

I made two copies of my original template and commented out the left menu on one and the top menu on the other and then assigned 'Home', 'About', etc to the template with 'hmenu' and 'Paintings' etc to the template with vmenu.

Rubbish.

If I clicked on 'Home' ALL the menu items appeared along the top with none at the side.

Clicking on 'Paintings' made ALL appear on the left with none along the top.

So, you can all see that I'm comprehensively stupid when it comes to understanding Modx and Wayfinder.

Any more thoughts?

Keith

Wrap your Wayfinder call with a div for each menu. Wayfinder will find the ul and li's and use your styles.

Assuming each link in your menu is a resource in MODX, and the horizontal menu is all first level resources, call the horizontal menu with &start Id=`0`, and set &level=`1` so it will only show one level, the first.

Assuming the resources that make up the side menu are all under one first level parent in the resource tree, call Wayfider again for the side menu, but use &startId=`5` (assuming 5 is the parent). If those side menu pages have children, use &&level=`2` as well so they don't show up, or you can use &hideSubmenu=`1`.



If you look at the documentation for Wayfinder, the parameters available can help you decide how to display the pages. Your resource structure plays a large part in helping Wayfinder make your menus. Anywhere.

You can also simply specify which resource Id's to display in the menu with the &includeDocs or &excludeDocs parameters.

Hope this helps :~}

edit: You only need one template, but put your wayfinder call in place of each menu, wrapped in it's own nav div ID or class. [ed. note: frogabog last edited this post 14 years ago.]

Thanks Frogabog. You're last comment led me down a path that fixed the problem and now I have the menus displaying correctly. Thanks to Ottogal who actually had already mentioned it earlier but because I didn't understand it.... Sorry.

It was the &includeDocs that did it although I was stumped at first when I included 0,1,2 etc. I thought it was the menu numbers but it's the document numbers.

Now, I don't want to appear unappreciative but if this is a CMS then pages should just be added without having to hack the template. In particular, if I hand this over to my partner she shouldn't need to know code.

There must be a more elegant solution. I can't believe this is the first template with a vertical and horizontal menu.

Am I missing something that either you or Ottogal said earlier? Or is there a way that these two sets of pages can be put into groups, perhaps.

Many thanks for your efforts so far but I think I'm still looking for the ideal solution.

Cheers

Keith

[ed. note: keithbrook last edited this post 14 years ago.]

It's actually quite simple and does perform as you expect a CMS to perform. However, if all your resources are top level resources you will have to use the excludeDocs parameter in every Wayfinder call, which is of course very inefficient.

The efficient way you're looking for is dependent on your Resource Tree structure.

MODX resources and the resource tree hierarchy is what determines which menus Wayfinder will produce. The &startId parameter is what tells Wayfinder which parent resource (container) to pull the menu from. Container resources do not have to show in menus, use the hide from menus box in the resource's page to hide them. The can be unhidden as needed with the &ignoreHidden parameter.

To get instant menus for various pages in your site, structure your resource tree with parents (containers) and child (sub) resources. In this way, you can call Wayfinder as many times on any page with different results by using the &startId parameter. The container doesn't show in the menu unless you tell Wayfinder to include it with &displayStart=`1` in the call. Even then, it will only show as a h2 header unless you specify that it is to be a link.

When you create or move a resource in the first level (under Web context) you will see it appear in any first level Wayfinder call (&startId=`0`). Create a resource under a parent resource (container) it will automatically populate and structure your menus that specify that parent with the &startId parameter set.

Moving a 1st level resource to reside under another 1st level resource automatically makes that parent resource a container. Call that container in Wayfinder, and you get the sub-resources in that menu.

Try a little experiment. Move a few resources into another resource (you can drag and drop resources in the resource tree). Then, call Wayfinder, let's say in the content of some page and set &startId to the Id of the resource you moved them into. View the page. You should see a simple list of all the child resources for that container, but not the container itself in the content area of the template.

Success at last, I think!!

I've just tried a hybrid of both your suggestions. That is 'include' the five pages for the top menu and 'exclude' the same pages for the side menu.

That then allows new pages to be added without coding anything else.

Ok, if I need another top item then code will be tweaked but that's very infrequent.

Unless anyone can improve on that, I'm going to mark it 'solved' in 2 day's time.

So, thanks to Frogabog and Ottogal for their time and help. Much appreciated.

Keith

Frogabog, I've just noticed your last missive since I sent my 'Success' post.

I'm going to digest it tomorrow as it's 1am here in Bulgaria.

Certainly it's a long piece and I appreciate your time in writing this.

Give me a few hours to grab some sleep and then reply!!

Blagodarya, as we say here!!

Keith