A Padded Cell Article: 3 Ways to Highlight Links to the Current Page with CSS

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Good usability suggests that you should always indicate links to the page the user is currently on. In fact, in an ideal case you wouldn’t link to the current page at all. On the other hand, in order to build a site that’s consistent and easy to maintain, you have to keep your navigation either in an included menu or in a database.

Read it now at A Padded Cell:

3 Ways to Highlight Links to the Current Page with CSS

Post here if you have any comments or questions.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

Interesting article Megan.

I am an old hand at JavaScript and I usually use it first, sometimes even in php pages, passing values back and forth.

I like the idea of the cursor:pointer rule to make the link less apparent.

While it could be tough to distinguish the home page

For example, if the link points to http://yoursite.com/ but the page is referenced from http://yoursite.com/index.html.

you could use js to search for a specific fragment of the url (I used to do this on GeoCities after they started adding ad code numbers to the urls)

Another possibility, as long as we are in the land of JS and DHTML, is to locate the link to the current page and rewrite it to a link to some other page, either a static rule or dynamic rule with an array of links...

I used to pick out unusual pages on my site and link to them instead of the current page so anyone inattentive enough to click on the link would get a "surprise" - but that would not do for a "serious" site. Smiling

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

3 more ideas

  1. Drupal has the ext module that adds a class to all external links and option to display an icon on them. Something similar could be done for self-links, an icon (don't know why)
  2. If you write the menu dynamically from an inc file or whatever, you could set the href of the self-link to "javascript:void(0)" which would not reload the page if clicked (I assume that is main reason we are dealing with self-links to avoid an unnecessary reload)
  3. similar to previous post but instead of changing the entire link you could merely write the text portion without the anchor...

These could all be accomplished with a combo of JS and CSS

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

netsperience wrote:
(I assume that is main reason we are dealing with self-links to avoid an unnecessary reload)

Oh, I didn't even explain that, did I? Maybe I'll edit the article to fix that.

It's really a problem with people being confused when they click on a link and it takes them to the same page they're on.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

yes, that is what I meant

on that subject.. users being confused...I go nuts when I see a mailto: href email link

On about 85% of peoples' computers (isn't that about the Windows % ?) it will pop open Outlook which they probably never set up and then they are staring at it - and if they try to set it up they will just get frustrated, unless they figure out they can use their cable/fios isp email, but really, we all know who we're dealing with here, right?

Meanwhile, they forget why they wanted to contact you: You just lost a client/sale/headache whatever-

so I advise/use contact forms whenever possible - it's so easy to set up the php mail() function... or some kind of SMTP cgi

besides, putting your email address in text on the page is going to get you a lot of spam (yeh I know about ways of concealing - but if you're doing that, why not put in a contact form?)

He has: 629 posts

Joined: May 2007

My preference: Replace the link tag with <strong> -- this even works with CSS off. (Netscape 4 users get unstyled pages from me. And, yes, Emily, the local school district still uses NS4... even tho' it's near Silicon Valley.)

Nice summary of the pros and cons of other techniques though. Thank you.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.