Third Level-specific styles for Dropdown - How is it done?

7 Posts

left23 Reply #1, 13 years, 11 months ago

Hi everyone. I'm checking out MODX for the first time and I've hit a wall

The drop down menu I want to create is like so:

<ul>
<li><a href="#">first level</a>
	<section>
		<ul class="level2">
			<li class="parent" ><a href="#">second level</a>
				<ul class="level3">
					<li><a href="#">third level</a></li>
				</ul>		
			</li>
		<li><a href="#">second level</a></li>
		<li><a href="#">second level</a></li>
		</ul>
	</section>
</li>
</ul>

Note the single section element wrapping the second level list and its child list, and the "level_" class attribute on the ul elements.

My chunk looks like so:

[[Wayfinder?
&startId=`1`
&level=`3`
&outerTpl=`menuContainer`
&rowTpl=`menuRows`
&innerTpl=`innerContainer`
&innerClass=`level2`
&innerRowTpl=`submenuRows`
&parentRowTpl=`menuParent`
&parentClass=`parent`
&levelClass=`level
]]

Is there any technique to apply the &levelClass to ul, and not to each li elements?

Is there a way I can add the equivalent of innerTpl for a third level list?

This is probably due to my inexperience...I'd really appreciate some advice as to how MODX heads would approach building this style of dropdown. Thanks.

I've checked out these forums, and the PDF by Kongondo, and the examples at MuddyDogPaw. I can see how the Wayfinder works when the sublevel styles don't differ from level to level.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 11 months ago

You can use levels of selectors in your CSS:

ul ul ul{style:setting;}

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

7 Posts

left23 Reply #3, 13 years, 11 months ago

Hi Susan, Thanks.

I agree, and editing the CSS might be the way I'll need to go.

I was initially looking for the solution that would allow me to manipulate the markup more specifically. Is this achievable using Wayfinder?

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 13 years, 11 months ago

Not as far as I know.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

793 Posts

ottogal Reply #5, 13 years, 11 months ago

You might find my Wayfinder Demo helpful.

You will see that the &innerClass is assigned to all the inner <ul> elements of the visible menu, but not to the outer-most one.

The &levelClass property is applied just to <li>, not to <ul> elements.

If you want to style the different levels with their own classes, you should make use of nested child selectors in this way:

ul {
    .........    
}

ul li {
    .........
}

ul li ul {
    /*  Put here the definitions 
        you have in your class level2  */
}

ul li ul li {
    .........
}

ul li ul li ul {
    /*  Put here the definitions 
        you have in your class level3  */
}

ul li ul li ul li {
    .........
}

To make create Wayfinder the <section></section> tag is not so easy. Is it really indispensable to have them here?

7 Posts

left23 Reply #6, 13 years, 11 months ago

Hi ottogal, Thanks for the reply and the link to the helpful demo. I've dropped <section> and will do it all in CSS. So I've simplified my chunk like so:

[[Wayfinder?
&outerTpl=`menuContainer`
&rowTpl=`menuRows`
&parentRowTpl=`menuParent`
&parentClass=`parent`
]]

I wonder can you confirm. &parentRowTpl should be applied to all <li> elements, no matter the level? I am currently only getting class="parent" on the first level parent items.

7 Posts

left23 Reply #7, 13 years, 11 months ago

Solved

I've enable the Container Setting for my parent item.