[thelist] a:active does this work for a menu item?
Sarah Sweeney
mr.sanders at designshift.com
Thu Jun 17 09:14:09 CDT 2004
Justin Zachan wrote:
> Hi there. I have a menu designed using CSS etc. All looks nice.
>
> What I want is for the active link on the menu to be highlighted in a
> certain way.
>
> i.e. click on "about", it goes to about.htm, and the "about" link has an
> active effect.
>
> I tried using a:active but it doesn't seem to work when you move to a new
> page.
>
> Anyway point me in the right direction for this effect.?
Justin,
The a:active pseudo-element is actually meant to set a style for when
the link is clicked on (or when a user tabs to the link and hits enter).
The easiest and most elegant (in my opinion) way to achieve the effect
you're after is this:
- set a class in your body tag like this, changing the class as needed
for each individual page:
<body class="about">
- in your menu, add classes to the links, something along these lines:
<ul>
<li><a href="index.html" class="home">home</a></li>
<li><a href="about.html" class="about">about</a></li>
<li><a href="contact.html" class="contact">contact</a></li>
</ul>
- add this to your CSS:
body.home a.home, body.about a.about, body.contact a.contact
{
color: red; /* or whatever you want the style to be */
}
HTH
--
Sarah Sweeney
Web Developer & Programmer
Portfolio :: http://sarah.designshift.com
Blog, etc :: http://hardedge.ca
More information about the thelist
mailing list