Navigation menu & unordered list: style active link of deepest level differently

139 Posts

Darkelve Reply #1, 17 years, 7 months ago

I want to create a navigation menu using an unordered list and CSS for styling (the ’a’-tags will be made into tabs, the tabs positioned below each other). How can I make it so that ONLY the ’a’ tag of the last ’level’ in the list has a different styling? I’ve tried to give the ’active’ class a seperate class, but that also styles the ’parent’ link (e.g. item1->subitem1->subsubitem1).

For example:

1. Starting page
* Contact (active-> only this should be highlighted)
* About
* Other

2. After clicking on Contact:

* Contact (active-> only this should be highlighted)
* Mail Us
* Call Us
* Fax Us
* About
* Other

3. After clicking on ’Call Us’:

* Contact
* Mail Us
* Call Us (active-> only this should be highlighted)
* Fax Us
* About
* Other

Same system for ’About’ and ’other’

How would I best code this without changing the Wayfinder-generated code too much?

1,390 Posts

kongondo Reply #2, 17 years, 7 months ago

Am not sure I fully understand your question especially this part

How can I make it so that ONLY the ’a’ tag of the last ’level’ in the list has a different styling

But looking at your example, if you use the &selfClass, you can style the current item only

&selfClass
default: NULL
values: name of class
description: The selfClass will be applied to the current item only.

Hope this helps, if not, am sure an answer will be provided by someone else.

Cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

139 Posts

Darkelve Reply #3, 17 years, 7 months ago

Thanks will look into it

it’s hard to explain the menu... in fact it’s probably too complex but my ’client’ wanted it that way... sigh. I’ve already spent as much time on trying to get the menu to work than I have integrating the entire (rest of the) template and site structure into Modx...

139 Posts

Darkelve Reply #4, 17 years, 7 months ago

Okay, to make it clearer below is the snippet call and the code (css, html) that I used.

I still need some way to make the ’first-level’ items into tabs... I always end up styling either the entire ’ul’ or all of the links inside of it.

The idea is that only the main categories show on an ’overview’ page with just the categories and when one of those links is clicked, the active one gets highlighted and the subpages show up. Then the user can click one of these subpages and the current subpage should get highlighted (different background color for the tab).

Wayfinder snippet call:

[!Wayfinder?startId=`14` &selfClass=`hier`]

CSS Code:

ul {
padding: 0;
list-style: none;
background: #fffcc;
}

ul a {
text-decoration: none;
}



ul ul li {
background: #fffcc;
width: 200px;
margin-bottom: 5px;
}

ul ul ul li {
width: 180px;
background: #ccc;
border: 1px solid black; 
}

ul li ul li {
padding-left: 12px;
}
	
ul ul ul li.hier {
background: red;
}

Html code (changed to make it ’neutral’... e.g. no links to the site in it)

<ul>

<li>
<ul>
<li class="active"><a href="/index.php?id=9" title="Category 1">Category 1</a>
<ul>
<li><a href="/index.php?id=1" title="Item 1">Item 1</a></li>
<li class="active hier"><a href="/index.php?id=2" title="Item 2">Item 2</a></li>
<li><a href="/index.php?id=4" title="Item 3">Item 3</a></li>
<li><a href="/index.php?id=5" title="Item 4">Item 4</a></li>
<li><a href="/index.php?id=7" title="Item 5">Item 5</a></li>
<li class="last"><a href="/index.php?id=8" title="Item 6">Item 6</a></li>
</ul>
</li>

<li><a href="/index.php?id=11" title="Category 2">Category 2</a>
<ul><li><a href="/index.php?id=12" title="Item 1">Item 1</a></li></ul>
</li>

<li><a href="/index.php?id=25" title="Category 3">Category 3</a>
<ul><li><a href="/index.php?id=26" title="Item 1" >Item 1</a></li></ul>
</li>

<li><a href="/index.php?id=27" title="Category 4">Category 4</a>
<ul><li><a href="/index.php?id=28" title="Item 1">Item 1</a></li></ul>
</li>

<li class="last"><a href="/index.php?id=57" title="Category 5">Category 5</a>
<ul>
<li><a href="/index.php?id=58" title="Item 1">Item 1</a></li>
<li><a href="/index.php?id=59" title="Item 2">Item 2</a></li>
<li><a href="/index.php?id=60" title="Item 3">Item 3</a></li>
<li><a href="/index.php?id=61" title="Item 4">Item 4</a></li>
<li><a href="/index.php?id=62" title="Item 5">Item 5</a></li>
<li><a href="/index.php?id=63" title="Item 6">Item 6</a></li>
<li><a href="/index.php?id=64" title="Item 7">Item 7</a></li>
<li class="last"><a href="/index.php?id=65" title="Item 8">Item 8</a></li>
</ul>
</li>

</ul>
</li></ul>

139 Posts

Darkelve Reply #5, 17 years, 7 months ago

Searched some more and I’m guessing I’ll have to create a/some ’chunk(s)’ so that the main category can be styled seperately as a tab. Been having some minor success with adding an ’ID’ tag to the a-link of the main category (using modified &parentRowTpl chunk).

P.S. What are categoryFolders and for what can I use them?

139 Posts

Darkelve Reply #6, 17 years, 7 months ago

Okay, I’m almost where I want to be... I have this Wayfinder call and CSS:


/* 
Wayfinder call:
[!Wayfinder? &startId=`14` &levelClass=`level`!]  
*/

/* CSS Code */
#navigatie ul {
margin: 0; padding: 0;
list-style: none;
font-family: arial, sans-serif;
font-size: 14px;
}

#navigatie li a {
text-decoration: none;
display: block;
background: red;
width: 200px;
border: 1px solid #000;
margin-bottom: 4px;
text-align: center;
font-weight: bold;
color: #000;
}

#navigatie li.level2 a {
text-decoration: none;
display: block;
background: yellow;
width: 180px;
margin-left: 20px;
0;
}

#navigatie li.level3 a {
text-decoration: none;
display: block;
background: orange;
width: 160px;
margin-left: 40px;
0;
}

#navigatie li a.active {
background: #ccc;
}

How can I add a ’active’ class the active link instead of/in addition to the current ’active’ class on the list item?

2,314 Posts

anonymized-26931 Reply #7, 17 years, 7 months ago

Hi!

this might help:

&lastClass - (last)
CSS class denoting the last item at a given menu level

&hereClass - (active)
CSS class denoting the "you are here" state all the way up the chain

&selfClass - ()
CSS class denoting the "you are here" state for current doc only

-> http://wiki.modxcms.com/index.php/Wayfinder
-> http://www.muddydogpaws.com/development/wayfinder/parameters.html

cheers, j

139 Posts

Darkelve Reply #8, 17 years, 7 months ago

Yeah Yeah! Creating & calling a &hereTpl chunk solved it!!

<li[+wf.classes+]><a href="[+wf.link+]" class="hier" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

( For CSS code see previous post )

Now the menu does everything I wanted it to do, three levels deep! I’m even a little bit proud of it :p

Oh yeah, and this post can be marked solved if deemed necessary.