Styling with odd/evenClass with nested ul

Hi,

I’ve coded a wayfinder side navigation menu. I use evo, but it shouldn’t matter. It applies oddClass/evenClass resulting in alternating shades of grey defined in my css.

A problem arises with nested uls in any one of them. A nested ul always starts with an odd class applied to it’s first element. This may be desirable in many cases but not when alternating styles. It should alternate according to it’s parent.

See attached image for the resulting navigation menu. How could I tackle this? Thanks in advance for any help.

i don’t think there is a solution for that, it cant know if the last li is even or odd.
i think u better do some css to give li li {border-bottom:1px solid #222;} or smt?
or a other level diffentent bg.

I know css cannot solve it. I was hoping for a Wayfinder trick. I started hacking away at it’s code but it seems very, very tricky.

It uses a counter with a modulo 2 to determine even/odd numbers. This is pretty straightforward in itself. So i figured all i needed to do was to have it not reset the counter for a higher level list. For testing purposes I have it put the counter in a classname like: counter1, counter2 etc.

I then saw it did not have the desired effect. Wayfinder doesn’t seem to walk through in the order I need it to. It counts one level worth of elements all the way to the last. Then afterwards it moves on to the next level (the nested list(s)). Here’s an example of the result:

- Level 1-1 (counter1)
- Level 1-2 (counter2)
- Level 2-1 (counter5)
- Level 2-2 (counter6)
- Level 1-3 (counter3)
- Level 1-4 (counter4)

maybe u can add class="y[+[~id~]+]" in the InnerRowTpl, and in css something like .y1, .y3, .y5,..{bgcolor:#333;} but it’s a suckage way.

It can be done with javascript, which is well-suited for traversing the DOM and picking out those LI elements. How crafty are you at scripting?

Quote from: cyclissmo at Jul 15, 2011, 09:54 AM

It can be done with javascript, which is well-suited for traversing the DOM and picking out those LI elements. How crafty are you at scripting?

I’m an intermediate and I could manage to script it like that. To save myself the time and trouble I dropped the alternating stripes all together though.

hi,

actually, css is able to manage this quite easily... if you don’t care for IE (except for ie9)
you can even go farther with css http://www.w3.org/Style/Examples/007/evenodd too bad, as too often, ie until 8 doesn’t understand those pseudo class
you could make the choice of having work where it does knowing that it won’t be seen in ie

have swing

Quote from: virtualgadjo at Jul 18, 2011, 08:31 AM

[..]actually, css is able to manage this quite easily... if you don’t care for IE (except for ie9) [..]

Also it does not work anywhere for nested lists, see my experiment @ http://cssdesk.com/MknQx