Welcome to WebmasterWorld Guest from 54.159.50.111

Forum Moderators: not2easy

Message Too Old, No Replies

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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 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)

Preferred Member

10+ Year Member

joined:Dec 7, 2001
posts:579
votes: 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)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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.