Michele’s Freeminding

Here’s a quick howto on easily achieving the “You are here” effect in a website navigation bar when using Textpattern for content management. That’s how I did it on Flydown Design.
If you don’t use Textpattern you can very easily adapt this to work on your system.

The technique uses CSS selectors to achieve what we want. So, supposing we are using a list for our menu, we need to give a different id to the ul for each section of the website. Plus, we’ll need to give a unique id to each li of the menu.

Here’s how I did it using a Textpattern tag to get the current section to create the ul id:

<div id="#menu">
<ul id="u<txp:section />">
<li id="mhome"><a href="/">home</a></li>
<li id="mabout"><a href="/about/">about</a></li>
<li id="mservices"><a href="/services/">services</a></li>
<li id="mwork"><a href="/work/">portfolio</a></li>
<li><a href="#" onclick="toggleContact();return false;">contact</a></li>
</ul>
</div>

<txp :section /> can be substituted with whatever suits your CMS. You can even type the section by hand if you want.
And this is the only thing that’s Textpattern specific — I’ve told you it was easy to adapt.

Now, we need to write some CSS code to finish it.
Basically, you’d want, using CSS selectors, to modify the li whose id match the ul’s id.
Below is how I did it:

#menu li {
...style for not currently selected sections...
}

#udefault #mhome, #uabout #mabout, #uservices #mservices, #uwork #mwork {
...style for currently selected section...
}

You can now sit back and enjoy CSS’s power. :D

I’m sure I’m not the first one to come up with this technique because it’s fairly basic, but I haven’t seen it anywhere else, so I thought it might be wise to share it.
Let me know what you think about it and/or if you use another way to achieve the same effect.

This post was written 2 years, 7 months ago on December 13th, 2005 late at night.