Highlighting Selected Items with CSS
I’ve often inspected other people’s code, and noticed a ’selected’ class in menus. It’s these little touches which make life unnecessarily difficult. Once you make the menu different on every page, the whole site becomes harder work to maintain.
Being a Dreamweaver user, I like to build menus into a template and forget about them, after all, they are navigation for the whole site, and shouldn’t have to change from one page to the next. Besides, I’m basically a lazy person, and I hate to create work for myself, needlessly. Once I read about using contextual selectors in CSS, to drive menus, I was a club member for life.
The basic principle of using contextual selectors in menus is so simple, you’ll wonder why you hadn’t thought of it yourself: give each link in a menu an ID, give every page body a category class, and then set a series of link contextual selectors in your CSS, like this …
<body class="grommets">
...
<ul>
<li><a href="/" id="home">News</a></li>
<li><a href="washers.html" id="wash">Washers</a></li>
<li><a href="grommets.html" id="grom">Grommets</a></li>
<li><a href="contact.html" id="cont">Contact</a></li>
</ul>
… and then in CSS …
body.general a#home,
body.washers a#wash,
body.grommets a#grom,
body.contact a#cont {
background-color: yellow;
}
So, whenever you visit a page with body class ‘grommet’, the link with an ID of ‘grom’ is highlighted, and so on.
On my latest web site, Casa Espresso (an espresso machine and coffee supplier), I use contextual selectors to change the background image of the list item tags containing the links.
I know what you Dreamweaver users are going to say next: “what about setting the body class in the template?” I know, I know, it’s a bit of a pain, but there are two straightforward ways around this:
1. Don’t set the class of the body tag, set it on a div instead, and change the CSS to work with container divs. This is just moving the problem somewhere else, but it avoids the need to edit the body tag, so I prefer to …
2. Create a body class attribute in your template, select the body tag, and create a template Editable Attribute. If you need to show menu selection in a page, selecte Template Properties from the Modify menu and add the class name to the body class attribute.
If you think about it, using contextual selectors in menus opens up a lot of opportunities, other than highlighting. For example, you could use the display style to show or hide sub-menus.