Re: Using Wayfinder to add classes to ul over multiple levels

&outerClass
is assigned to the outer-most <ul> element of the (visible) menu only.

&innerClass
is assigned to all the inner <ul> elements of the (visible) menu, but not to the outer-most one.

( Have a look here: http://www.calidris.de/ottogal/ymodx/index.php?id=65&lang=en )

Hence if you have in your Wayfinder call, then also the third (and forth a.s.o) level will get this class.

A workaround could be not to use classnames like "level-one", "level-two", but to write the rules in your CSS in the following way:

@ottogal I've been attempting to achieve similar to the OP with Wayfinder. Thanks for the ul li ul li ul suggestion, which I've implemented as a workaround.

I'd prefer to have this behaviour though:

https://forums.modx.com/thread/79748/wayfinder-unique-id-with-innertpl?page=2#dis-post-476746

where only the <ul>s in the last dropdown (Help menu) have 'pull-left' applied.

Prehaps future versions of Wayfinder will allow more control over the <ul>s as, for example, &levelClass does for <li>s?

Thanks, Craig

Have you tried using an innerTpl that has [[+wf.classes]] in the opening ul tag?

Create a parentRowTpl and add it to your Wayfinder call. In your chunk use something like:



Now your CSS...

First Level


Second Level


Third Level


Target last LI in Third Level if you have multiple parent-3


This will be much more efficient than iterating over all li items in CSS. You may also still want a generic class on the parent li to target sub-nav styling.. so in that case you can do something like <li class="parent-[[+wf.level]] sub-menu">[[+wf.wrapper]]</li> or stick with the innerClass.

https://github.com/Idered/cssParentSelector

Very nice, Susan. That will come in handy.

Apparently that is a javascript hack to implement a possible later CSS (4?) parent selector.

@craigphiz

Please take a look at the attached zip

Its a three tier dropdown => ul ul ul

The last li element in the top level UL has its sub sections flow from "Right To Left" whereas all the rest flow from left to right.

CSS is in the index.html

IE8 requires the conditional comment thats in the head of the index.html and obviously the files that are in the "ie" folder

Wayfinder call and required chunks are in the "WAYFINDER README.txt"

The nav works in IE8, IE9, IE10, Firefox, Safari, Opera & Chrome

If you have good knowledge of CSS this solution should be easy to understand.

Cheers

p.s I can't offer support for the CSS as I don't have the time - sorry [ed. note: iusemodx last edited this post 13 years ago.]

Quote from: iusemodx at Sep 05, 2013, 06:00 PM

@craigphiz

Please take a look at the attached zip ....

Wow, that's brilliant! I've been learning more recently about the pseudo classes so with your example I feel confident I can adapt the existing nav.

Thank you

PS This related post may help others: https://forums.modx.com/thread/79748/wayfinder-unique-id-with-innertpl?page=2#dis-post-476746 [ed. note: craigphiz last edited this post 13 years ago.]

Quote from: craigphiz at Sep 06, 2013, 04:30 AM

Wow, that's brilliant! I've been learning more recently about the pseudo classes so with your example I feel confident I can adapt the existing nav.

Sounds good - hope it works as you wanted it to

Cheers