CSS menus: road to perdition

I've almost finished to style via CSS the weblog menu on the left. Other than well-known practices to style order/unordered lists here I'm gonna briefly illustrate how I styled navigation list items using a nifty trick originally found on "More On BODY IDs" by Scott Andrew as reported by Simon Willinson's message.

In particular, while the "Outside Reading" ordered list is identical on all the sections of the weblog, the navigation list items (e.g. "About Me") need a different appearance based on the section of the weblog being browsed by the reader. Apart this obvious usability consideration it's more pratical to have only one copy of the navigation list to maintain over the whole weblog instead of almost identical HTML code repeated over multiple pages.

The steps to achieve this effect are:

Server-side or client-side include the same navigation HTML code in all your pages.
Assign a value to the id attribute for each relevant page's <body> tag.
Assign a value to the id attribute for each anchor in the navigation section.

By doing this you are now be able to set specific styles to the same page navigation elements based on their containg page. For example, given this HTML code for the "Weblog" anchor:

<ol id="nav">
  <li>
    <a id="blogL" href="default.m">Weblog</a>
  </li>
</ol>

Try to write a CSS rule like this one:

#main #nav #blogL
{
  font-weight: bold; text-decoration: none;
}

The above rule tells the browser to render the anchor text (blogL) within the navigation list (nav) in boldface and with no decorations at all when it displays the "main" page (those CSS selectors are easier to read from right to left).

Since "main" <body> element identify the weblog front page it makes sense that "Weblog" link is rendered in the browser as normal text (of course it is still a link).

Let's add a bit of eye candy: users with cool browsers (e.g. Mozilla, Opera) will see a » character appearing on the left of the current weblog section. To do this add this second rule:

#main #nav #blogL:before 
{
  content: '\00bb\0020'; 
}

Which is similar to the previous one but uses CSS2 content generation features to dinamically add data before the matched HTML element. The two strange codes 00bb and 0020 are the hexdecimal equivalents of the slightly more human-friendly » and   HTML entities. Confused? Just take a look to this HTML special characters chart.

Feb 11 2003, 8:25 PM

Top^