[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