Targeting first sub-menu item only (or 2nd only, 3rd only, etc.)

After spending a few hours searching the forum and not finding anything about this I decided to post a new topic.

I’m trying to figure out if there is a way to target inner submenus based on their levels in the same way you can reference sub-items.

<ul class="LevelOne">
<li class="line1">
<a href="...">Link</a>
<ul class="LevelTwo">
<li class="line2">
<a href="...">Link</a>
<ul class="LevelThree">
<li class=...... etc..

I know you can do it for the list items using &levelClass parameter, but I don’t see any method to do the same thing for the menu items (ie: <ul>)

Any thoughts?

What do you mean by target? CSS?

I use CSS to create flyout menus and different levels:



For the third level, for example.



For the second active level.

That’s a good thought. Hadn’t thought of that.

What I mean by target is through wayfinder to be able to assign a class for a particular sub-menu so that I can reference that level differently from all following.
For example:

<ul>
<li class="line1">
<a href="...">Link</a>
<ul class="sub">
<li class="line2">
<a href="...">Link</a>
<ul>
<li class="line3">
<ul>
<li>....

So I want the markup to apply a class name to just the second <ul> in the structure and have all following have no class applied.

If that can’t be done I guess I’ll have to figure a different way of doing it via changing the css around.

I’m glad you asked this question, because when I first put my Wayfinder menu together I didn’t really understand the wiki. Now I went back and got this working. It is going to make my css a lot simpler.

Just add this to the snippet call &levelClass - ()



turns into

Yeah, I got that part. Too bad it looks like there isn’t a built-in way to do the same thing for the inner <ul> elements.

Oh well.. I’ll have to change up the CSS.

Not sure but I think that you can use the [+wf.classes+] placeholder in the innerTpl

The only problem with that is then it’s the same for each sub <ul> element.
So it ends up looking like this:



I just don’t think it can be done. Maybe in the future Kyle will add it...

Quote from: mbrinson at Mar 04, 2008, 05:33 PM

The only problem with that is then it’s the same for each sub <ul> element.
So it ends up looking like this:

    <ul>
        <ul class="sub">
            <ul class="sub">
                <ul class="sub">

Instead of:
       <ul>
         <ul class="sub">
             <ul>
                <ul>

I just don’t think it can be done. Maybe in the future Kyle will add it...

This thread is very interesting, though I have no need for what you are to accomplish in the near future, but I am curious to know the answer/solution too

Just a thought, how abut using ’&rowClass’, ’&innerClass’ or ’&levelClass’ and instead of using [+wf.classes+], use [+wf.classnames+] placeholder?