On 20 Sep 2005, at 05:00, [EMAIL PROTECTED] wrote:
I often have CSS designs that call for a tab, link, button, etc; to be
highlighted in some way (usually by having a different class
attribute)
from the other links when the user is on the page the navigation
element links to.
This is a PITA to build. Anyone have some good suggestions? I'm even
thinking about using Javascript instead of doig it server side.
Here's a neat CSS trick that works mostly client-side (no JS) and
does what you want.
First, give every page (or section) on your site an ID, applied to
the body tag:
<body id="aboutpage">
Later on, in your navigation, do this:
<ul>
...
<li id="nav-aboutpage">About</li>
...
</ul>
Then add the following rules to your CSS:
body#aboutpage li#nav-aboutpage,
body#contactpage li#nav-cantactpage,
body#homepage li#nav-homepage {
background-color: yellow;
}
This means that on the aboutpage, the nav-aboutpage list option will
be highlighted. On the contactpage, nav-contactpage will be
highlighted - and so on.
Of course, this approach doesn't scale to hundreds of different pages
very well - but it's great for small sites or for sections of large
ones.
Cheers,
Simon Willison
