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

19 November 2004

17 comments

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

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?

Categories

, ,

Comments

  1. 1/17

    Rob Mientjes commented on 19 November 2004 @ 01:01

    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. 2/17

    Trovster commented on 19 November 2004 @ 01:22

    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. 3/17

    Anne commented on 19 November 2004 @ 02:12

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

  4. 4/17

    ACJ commented on 19 November 2004 @ 03:05

    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. 5/17

    marko commented on 19 November 2004 @ 03:17

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

  6. 6/17

    Jonathan Snook commented on 19 November 2004 @ 03:19

    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. 7/17

    Ste Grainer commented on 19 November 2004 @ 05:07

    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. 8/17

    The Man in Blue commented on 19 November 2004 @ 10:29

    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. 9/17

    ACJ commented on 20 November 2004 @ 03:52

    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. 10/17

    Web commented on 22 November 2004 @ 15:16

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

  11. 11/17

    Guy Carberry commented on 22 November 2004 @ 19:06

    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. 12/17

    beto commented on 24 November 2004 @ 02:54

    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. 13/17

    Anne commented on 24 November 2004 @ 04:19

    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. 14/17

    otto commented on 24 November 2004 @ 19:33

    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. 15/17

    Terrence Wood commented on 25 November 2004 @ 07:58

    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. 16/17

    jixor commented on 10 December 2004 @ 15:21

    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.

  17. 17/17

    Kevin Cannon commented on 13 December 2004 @ 03:13

    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/

  18. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed