homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS active page highlight
Does CSS allow menu links for the active page to be highlighted?

 12:26 pm on Nov 6, 2002 (gmt 0)

Does CSS allow text links for the active page to be highlighted (for my menu bar)? If I were using buttons I would have a differnt button colour in the menu bar for the current page, but I'm using text links. I tried the following but it doesn't work. It highlights while the browser is changing from one page to the next but I want it to stay highlighted while the visitor is in that page.

a:link { color:#003366 }
a:visited { color:#003366 }
a:active { color:#FFFFFF; background:#003366;}
a:hover { color:#FFFFFF; background:#003366; }



 12:39 pm on Nov 6, 2002 (gmt 0)

You need to assign a "class" to display your page in the list of links:

.page { color:#FFFFFF; background:#003366;}

Then you need make the text plain and not linked.
Then you assign the css class to the text possibly using the <span> tag:

<span class="page">Home</Span>

Unfortunately, this means carrying out the unlinking etc on each page.


 12:47 pm on Nov 6, 2002 (gmt 0)

Unfortunately, this means carrying out the unlinking etc on each page.

It's a monotonous task that many web sites ignore. But I highly recommend it as a usability enhancement. It's an essential feature of user friendly site to give the visitor LOTS of cues as to what their location is -- and that often results in longer visits.

I try to do all of these:

1. The displayed page is not an active menu link
- no link should reload the page you're on

2. Any menu label for the page should look different
than the other menu choices somehow. ALL CAPS works well
for me when the menu labels are short words

3. A page Header of some kind duplicates the exact
same label used in the menu, word for word.

4. A shift occurs in color, image, or icon between
the different major sections of the site.

I've not always been a good boy in this area. But my sites that do follow these four guidelines show a lot of page views per unique.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved