Page style:

A Blue Perspective: Practical usability tip #19: turn off current page links using CSS

Practical usability tip #19: turn off current page links using CSS
19 November 2004

It made it in at number 10 for Jakob last year, so it must be a matter of importance: don't have a link to the current page. He tells you why, so I'll tell you how.

When you're dealing with a lazy programmer, they'll be loathe to dynamically change navigation items in the HTML because that means they have to take a nice static template and then actually code something – figure out what page they're on, put in some conditional statements to figure out what's an anchor and what's not, and then loop through some structures. It's all much easier if you just put a body class for each page.

Of course, then you run afoul of directive 10, because links remain clickable even if they're highlighted as the current page. But that's only a problem if users think that they're clickable. While introducing some visual differentiation for current page links reduces the likelihood of a user clicking on them, they still know that they're clickable and might well go ahead and do it. (Who knows why? they're users!)

One of the strongest feedback mechanisms for deducing clickability on web pages is the finger. You get the hand-with-pointing-finger icon over anything that's hot. Through the marvel of CSS you can remove the finger, keep the arrow, and the user is none the wiser that they can click. (The status bar might give it away, but I'll let you deal with that one.)

Code?

body.highlightClass #menuItem a:hover
{
cursor: default;
}

Easy. Of course, this is no real replacement for removing the link from the HTML, but you're a lazy slob, so why do you care?

Comments

1/18. 19 November 2004 @ 01:01, Rob Mientjes wrote:

Thanks for reminding me to do so too. I use a nicely coloured flag for my current pages, and it works well, but it can't beat a default cursor, I guess.

2/18. 19 November 2004 @ 01:22, Trovster wrote:

I have thought about this before, and actually implemented on a few occasions. The problem is I use my navigation to go back to the main section area, with sub links down the side, which doesn't have a home in that section link. So making the link look not clickable I think a user might get confused, not being able to find a clear way back to that sections main starting point. Maybe a link on the sub navigation would help...

3/18. 19 November 2004 @ 02:12, Anne wrote:

Solving a problem should be done at it's root, in this case the programmer.

4/18. 19 November 2004 @ 03:05, ACJ wrote:

It's an ugly solution and I couldn't agree more with Anne, but if you're at it anyway; why not add the following:

body.highlightClass #menuItem a {
color: inherit !important;
text-decoration: none !important
}

I think that if a string APPEARS to be a link, but then shows a default cursor when hovered, then yet acts like a link (via status bar and what not), and then eventually turn out to not do anything after all... really adds to the confusion. The two extra rules I provided make for it not to APPEAR like a link to begin with.

My 2 cents.

P.S. Next, I want to see something that actually removes the a href part; be it with innerHTML, or XSL, or both. =p

5/18. 19 November 2004 @ 03:17, marko wrote:

Here's PHP to the rescue : )
http://www.maratz.com/blog/archives/2004/11/18/faux-active-link/

6/18. 19 November 2004 @ 03:19, Jonathan Snook wrote:

Well, ACJ, let me introduce the ability to remove the current link using unobtrusive javascript: http://www.snook.ca/archives/000290.html

Thanks to The Man in Blue for the inspiration!

7/18. 19 November 2004 @ 05:07, Ste Grainer wrote:

For the Googlers, may I just suggest changing the title from "turn off current page links using CSS" to "hide current page links using CSS"? The links are still there with this technique, they're just hidden - wouldn't want someone coming here and thinking otherwise. (On closer inspection, why does the article title not show up in the <title> of your archive page. This would be very useful. Just imagine yourself running a search for an article on the site later...)

Great tips, though, and the suggestions in the comments are awesome. Nice to have client-side and server-side programming solutions linked as well.

8/18. 19 November 2004 @ 10:29, The Man in Blue wrote:

Anne: you ever lighten up?

Of course it'd be nice to get the programmer to do it (as I said twice in the article), but for people who don't have that access it's at least helpful to have a shortcut that gives a bit of a solution.

ACJ: most nav items already don't look like links.

9/18. 20 November 2004 @ 03:52, ACJ wrote:

Good work, marko and Jonathan!

I see, Cameron. I thought you were talking in general: I didn't notice you were actually practicing yourself. I guess that means it works. =p

Anne, I hope you'll never light up on this sort of matter. ;)

10/18. 22 November 2004 @ 15:16, Web wrote:

Is there a way to actually remove the link in CSS3?

11/18. 22 November 2004 @ 19:06, Guy Carberry wrote:

I use this method quite a lot. However, it can be a bit of a nightmare when dealing with a huge site with lots of navigation items. You then end up with quite a lot of CSS to match the body ids with the link ids.

So I use javascript to match the text in the link with the text in the <h1> of the page (assuming you only have one h1 tag per page). If you have more than one H1 you could use the content of the <title> tag as long as the string exactly matches the text in the link. If the text in the H1 matches the text in the link, it applies the class "here" to the link which does exactly what you explain above.

See an example of this working here: http://www.open.ac.uk/personalpages/g.d.carberry/testbed/pages/why-the-ou-uses-online-conferencing.htm

The javascript is here: http://www.open.ac.uk/personalpages/g.d.carberry/testbed/scripts/javascripts.js

The original script was written for me by Jeremy Keith (www.adactio.com). I've since modified it to strip out any rogue whitespace and incosistencies in letter case.

12/18. 24 November 2004 @ 02:54, beto wrote:

Great tips as always, specially for those who can't or rather won't mess with programming in order to achieve the same effect.

This used to be a headache of mine until I mastered a way out using some basic PHP and conditional statements on my menu module. Plus I can add the phrase "this page" to the current section link for accesibility issues and hide it via CSS.

I still prefer my method over tricking out with pure CSS as above, but I have to agree 99% of users out there won't notice the difference.

13/18. 24 November 2004 @ 04:19, Anne wrote:

Web, there was once an Opera draft about a 'link' property. The property never made it although it would be very useful. In XML applications (it doesn't work for the XHTML namespace at the moment) you can use the property as '-o-link' and you can read about it on the Opera support pages.

14/18. 24 November 2004 @ 19:33, otto wrote:

But what if your sections are made from database, then for each new section you need to change CSS file.

This method could be good only for top navigation with few navigation elements, but if you have huge site with 5-10 sections and each section has ~50 sub pages then it is impossible.

I'm using following method:

[li][a]item 1[/a][/li]
[li][b][a]item 2[/a][/b][ul]
[li][a]item 21[/a][/li]
[li][b][a]item 22[/a][/b][/li]
[/ul][/li]
[li][a]item 3[/a][/li]

And so you can define that selected page has [b] tag.

15/18. 25 November 2004 @ 07:58, Terrence Wood wrote:

I've use this CSS method before-- it's a good quick fix when you don't have a budget to improve usability on an existing site and it works well in:

a.) visual browsers
b.) with stylesheets turned on
c.) when using a mouse.

However, it still doesn't fully answer the usability issue of having active links to the current page in situations where all of the above conditions are not met.

If you have ever been lost in a site, or watched users who are lost in a site, it becomes obvious that the only way to address this issue properly is to not code links to the current page... either by hand or through server-side technology. (But TMIB does point that out.)

16/18. 28 November 2004 @ 09:18, Marco Luethy wrote:

Ha ha.. I know all to well what you're talking about. Hello, my name is Marco Luethy and im a lazy programmer.

17/18. 10 December 2004 @ 15:21, jixor wrote:

If you have any programming ability its very simple to check for each item of navigation if its the current page or not. On my site my script even checks if its the parent of the current page.

The navigation is just an easily modified array that is processed through a template engine, only a few lines of code really. Definitely worth the negligible effort. The array is produced from an ini file, arguably that makes it easier to add, remove and modify the navigation system anyway.

PS I'm not trying to sell my system as it isnt for sale, or even free download, how tight.

18/18. 13 December 2004 @ 03:13, Kevin Cannon wrote:

Hi folks,

This script I've written, (highlights the current link) may be of use to people if they want to disable it.

http://www.multiblah.com/tools/highlightCurrentLink/

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.