18th May, 2004

Ticked Off? Visited Links How-To

I've had many responses already to the sidebar links. I'm sure somebody must have done something similar before, although I haven't seen an example, and I expect Jakob Nielson would shoot me on the spot.

Obviously, the technique makes use of background images, but it would be worthless without some simple CSS framework. Here's a basic overview of the approach for this site.

Background images

First off, the background images need to be made. It's important to be aware of the column width you have available, and a good idea of any padding that might be applied to the container style. As we're using background images, size does not have to be exact, but the effect will be ruined if your tick is only partially visible. My available width was an awkward one (240-ish pixels housed inside a box-model hack) so I was careful to take into account alternative browser display, but it's not vital.

Link state
Visited state
Hover state

Thus, we have three gifs that appropriately represent the user's progress, and these now need to be called using the CSS.

The CSS

The links will require an alternative set of links styles (link, visited, hover and active) to the main style that may be controlling all standard links. We'll call this menulist. Although we're doing nothing special with the active state, some browsers require a statement on its behalf, or else they'll ignore the others.

For this method to work, the whole background image needs to be the link—regardless of the length of your text link—otherwise we'd hardly ever see the tick. We're using the CSS display: block element combined with a set width (in this case a silly 239px) to make the whole image active:

.menulist {
line-height:150%;
text-decoration:none;
display:block;
width:239px;
}

I've added line-height to space the gifs out nicely. Once this style has been declared, we need to set the display for our four link states. The main menulist style controls the static display, so here we're free to specify colour of text and background images:

a.menulist:link {
color:#666;
background:url(linkimage.gif);
}

a.menulist:visited {
color:#666;
background:url(visitedimage.gif);
}

a.menulist:active {
background:url(linkimage.gif);
}

a.menulist:hover {
color:#F33;
background:url(hoverimage.gif);
}

The above styles are the exact ones I use for this site, but it is of course possible to play with text-decoration, color and other typical link elements.

Calling the styles

This is as easy as pie. All we need to do is add class="menulist" to each link, preferably after the title element. It's usually perfectly possible to add this declaration to any back-end scripts (pMachine, Movable Type etc) for auto-generated links.

<ul>
<li><a href="file1.php" class="menulist">Title here</a></li>
<li><a href="file2.php" class="menulist">Title here</a></li>
</ul>

I've also applied a list style to each link set to place a 2px margin below each background gif, which prevents each link coming together as one block, though you may prefer it without.

That's it

And that's it really. Nothing special, but used appropriately I think this method can definitely aid usability. As we have retained all the usual elements within the style, there is no disruption with style sheets turned off. When navigating a page chock-full of links the ticks give a subtle but obvious indication of previous links followed.

Feel free to use the code above in some form or another on your own site, and do leave a comment if you've adopted it, though I'd be grateful if alternative images were used. And if you've already implemented a similar method, give us a link. Just don't tell Jakob.

Update!

The following is in response to the suggestions of Lazarus and James. It uses one image, with each bar 15px height, and 5px space after each (to allow for my 2px padding on the list style).

Then, all we need to do is adjust the link style background-position for each. In this example, we move the image up by 20px each time.

.menulist {
line-height:150%;
text-decoration:none;
display:block;
width:239px;
background:url(images/ticks_combo3.gif);
}

a.menulist:link {
color:#666;
}

a.menulist:active {
color:#666;
}

a.menulist:hover {
color:#F33;
background-position: 0 -20px;
}

a.menulist:visited {
color:#666;
background-position: 0 -40px;
}

Prev / Next

Tags

If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.

Responses

# the lazarus corporation responded on 18th May 2004 with...

That’s a really nice and simple effect that works very well - and you’ve semantically identified the menu items as an unordered list, which is of course absolutely correct.  I’ve never seen the background image used like that before, so I think you can claim the credit (patent it now!)

In IE 6 there’s a flash of background white when you move the mouse over the link (while it loads the “hover” version of the image).  Just a thought, but if you set the background colour of the

  • tag to the same light grey as the main bar of the gif, and then redo the gif’s so that this lighter grey is transparent then it might overcome this. 

    Alternatively, maybe set the background colour of the

  • tag to the same light grey as before, and then chop the gif’s down to just the square with the icon, and use background-position:right to align them.  This also has the advantage of reducing the size (physical and file) of the image.

    But it’s only an incredibly minor point.

    Lovely CSS.

  • # Simon Collison responded on 18th May 2004 with...

    There was a very interesting discussion on Keith’s site about best methods of using visited links. Worth checking out - but no mention of background images.

    Lazarus - I agree with your suggestions - I’m paying now for building so fast. Reducing the reliance on the actual images would be a step forward - especially if approaching a redesign. Using ‘background-position:right’ with a small icon would allow us to treat the actual link text seperately, avoiding left-right conflicts.

    Good stuff…

    # Simon Snorkeller responded on 18th May 2004 with...

    Lazarus - anymore of this talk and you’ll have Mr Collison sending you over piles of freshly-washed CSS, ready for a good pressing and ironing…!

    # Tomas Jogin responded on 19th May 2004 with...

    That’s a really good and original idea, especially for link pages. Thanks for sharing.

    # Frank Zehelein responded on 19th May 2004 with...

    This is really a nice site! It’s not the first time, someone is using this technique but never the less its a great example how to use it (and a good idea if you came yourselfe across it).

    See example here:
    http://www.designmadeingermany.de/

    # James Colyer responded on 19th May 2004 with...

    Just a thought with the image rollover hiccups reported by lazarus…perhaps a variation of Pixy’s no-preload technique?  Stack all three images together into a single image, then set the <li> to the normal state graphic.

    This will eliminate the pre-loading of multiple seperate images and also eliminate the flicker perceived by some IE users.

    # Simon Collison responded on 19th May 2004 with...

    Interesting to see the German example - uses smaller icons as discussed by Lazarus.

    James, to counter the flashing on IE, I’m going to do a re-write as you suggest, using just the one image and the background-position: element, and I’ll post it here or amend the article asap. I’m going to stick with the long gif for now, but right-aligning an icon-type image is a good way forward. Big thanks for the feedback so far…

    # Jeff Croft responded on 19th May 2004 with...

    <style. I love it!

    One question, though….would it not be a bit simpler to give your unordered list a class or ID so that you didn’t have to specify a class on every single anchor tag?

    For example, if your ul had a class of “menulist”, you could use the following to select it in CSS and avoid having to put class=“menulist” on every link.

    ul.menulist a:link { }

    Just an idea—great work, keep it up!

    # Simon Collison responded on 19th May 2004 with...

    Just posted a small update above that considers points raised by Lazarus and James (one image with no flashing).

    Jeff - glad you like it, and thanks for the suggestion. Have to agree there! I’ll probably combine it with the update and refresh the tutorial (but not today, I’m tired!). Stay tuned…

    # James Colyer responded on 20th May 2004 with...

    Okay I couldn’t resist trying to make this concept work with the minimum of markup and the most minimal of graphics.  An example is now available privately at my website.

    This version features a minimum of markup, use of a nicely degradeable ordered list, and a single image (only 16x48) comprising only the default, rollover and visited ‘ticks’

    Enjoy!

    # Jeff Croft responded on 20th May 2004 with...

    Nice job, James. I’m still not understanding why you need the class assigned to the each link, but whatever. :)

    Jeff

    # James Colyer responded on 20th May 2004 with...

    Ah the extra classes are force of habit. They are there to allow for more control over each element, say if you wanted to use the <body> element in conjuction with the [id] or [class] attributes to indicate current selection.


    body.ticksthread #menulist li a.ticksthread { background-color: #ffe; }

    By setting the <body>‘s class to ‘ticksthread’ the background of the <a> element with the class ‘ticksthread’ would change to a bright yellow to indicate the current selection.

    So the extra [class] tags are totally optional in this example.

    I’ve updated the example  by removing the extra [class] attributes and seperating the CSS from the XHTML documents.

    # James Colyer responded on 20th May 2004 with...

    Just another quick little note, I just checked the updated example in a variety of PC and Mac browsers and it works well in all of them.  The only notable exception to this is Opera 6 Mac which does not display the tick images at all, but then again that’s not too suprising.

    # Simon Collison responded on 20th May 2004 with...

    Ah, was about to re-post last night, when the darned internet service provider stopped service providing.

    Good to check back and see that James has taken care of it - good work! Very similar to what I’d nearly finished, except I’m still using the long single image, and naturally I’m adopting Jeff’s suggestion too.

    Haven’t implemented any of this on the site yet - so don’t be surprised if it still flickers. And as for Opera - you do surprise me…

    # James Colyer responded on 20th May 2004 with...

    Simon-

    Well I’ve found that Opera 6.x on the Mac is always problematic when it comes to extensive use of background images, especially when it comes to accessible image-replaced navigation lists.

    Another example of various image replacement techniques I’ve collected from various sources and applied to simple degradable un-ordered lists.  You’ll note that they all work on Opera 6 Mac, but will not change state when rolled over.  You can find my testing notes within the inline CSS block in the document.

    Mac browsers work well; Opera 7 Beta, OmniWeb 5 Beta, all current Mozilla, Moz-based browsers, Safari 1.2, and even *gasp* IE 5.2.

    One of these days I’ll get my website “done” and all these techniques will be documented as articles.

    # Simon Collison responded on 20th May 2004 with...

    Speaking of I.E Mac, check out the CollyLogic sidebar on there - ultra-strange 1px high horizontal lines that come and go! Very random. I’ve not had chance to go in and debug it, but it just goes to show how daft that browser is.

    As for your site, awaiting impatiently. Flag it up on here when it’s done…

    # Anton responded on 21st May 2004 with...

    <script becuase of some diffuculty I was having getting thing to work right.
    <styles/01.css” target=“_blank”>CSS

    # Jeena Paradies responded on 24th May 2004 with...

    Hej guys,

    You all have a problem with valuable text size!

    Look at James example on Mozilla with 200% text size:

    http://jeenaparadies.de/test/css-tricks/colylogic2.png

    It looks really bad. I worked a little bit with to solve the Problem, look at my example.

    # James Colyer responded on 24th May 2004 with...

    Jeena-

    I only spent about 10 minutes on mine and didn’t really take the time to make a version that would scale with different text sizes other than the browser default.  Normally I would do such testing when doing a full design, but this was just a quick little proof-of-concept.

    Nice modifications, they look great at expanded sizes!

    # Simon Collison responded on 24th May 2004 with...

    Probably time to resize with ems. Thanks for the tip-off Jeena, I’ll implement a few scaling changes as soon as I get time.

    Plenty more errors here and there - I really did run out of time! That said, I may not spot them all, so tip-offs always welcome…

    # Martin Rack responded on 25th May 2004 with...

    http://www.lpsp.de - my first xhtml/css-site launched: 25/05/2003

    :)

    # Simon Collison responded on 25th May 2004 with...

    Last year Martin!!! He-he - and you did the site mentioned earlier too? Well, like I said, I never assumed it was original, but I thought it’d be good to share the technique.

    You use the method really cleanly - very effective - and on the active state I notice. I’m hoping a few people will eventually use this method (if you do, please post links here). I’ve had so much positive feedback about it, with many people saying it does aid usability - especially people from Germany…

    # Martin Rack responded on 25th May 2004 with...

    Jup. Found this article by checking our refferers (many).

    Good to see people like you taking the time to share this knowhow!
    Good to see webusability is spreading more and more!

    :)

    Greetings from Germany.

    # ryan responded on 30th May 2004 with...

    You could use a setup like

    <div id=“menulist”>
    and then links without classes by using css like this:

    #menulist a {the usual stuff in here}


    also, this is a great live preview thing you have set up.
    -[ryan]

    # Jeena Paradies responded on 30th May 2004 with...

    why not use:

    ul id=“menu”

    and
    #menu a {  }

    # Ryan MacLeod responded on 31st May 2004 with...

    same thing.

    you seem to have missed something, Mrs. Paradies:

    it goes right from “why not use” to “and”, two lines downs.

    Would you mind re-iterating?

    # Jeena Paradies responded on 31st May 2004 with...

    I mean
    <ul id=“menu”>
    (I don’t like this live preview)

    Why should he use another useless <div> if it is not nessesary?

    Jeena

    PS: I’m a Mr. Paradies see the picture on my page.

    # Jeena Paradies responded on 31st May 2004 with...

    And again; see this picture:

    http://jeenaparadies.de/impressum.php#persoenlich

    Jeena Paradies

    # Pete responded on 4th June 2004 with...

    That is a fantastic effect. I plan on using a similar version on my final redesign. Thanks for opening it up to the masses!

    # Simon Chettle responded on 8th June 2004 with...

    Hey, just thought I’d say that this technique really is cool, with your permission I would like to use one I have adapted at
    epicstudios.co.uk

    I have modified both the code and the image (using the 3*combo btw) to fit in with my site, and to try and differentiate it from yours, but I couldn’t find a better alternative than a tick, although I have used a different styled one.

    If you have any objections please let me know (email) and I will remove it straight away. If it is ok (or) isn’t I will put a link to your site and maybe this tutorial on the front page

    # Simon Collison responded on 8th June 2004 with...

    Don’t you worry about it Simon - looks good. I’m all for more people adopting this method in the name of usability.

    Here’s two more examples from a couple of recent re-designs, which both look more like mine than yours does (thanks for the credits to both)...

    Riding the clutch

    Angry Pete

    Post any others here folks.

    # Andy Budd responded on 11th June 2004 with...

    Nice

    # Dr John responded on 16th June 2004 with...

    Very interesting.  A good extension of ideas I had myself (apart from the tick for visited) but never got round to fully implementing.  Must try to find a use for this much better method - I was considering just swapping separate images for the background.


    However, when I mouseover your menu and get to the last link in a set, the next set below jerk upwards a few pixels.  Using IE 6, win 98se.  Is this a know bug in IE or an error in the coding?

    # Simon Collison responded on 16th June 2004 with...

    Hmm, I think it is something to do with collapsing margins in IE PC (Andy Budd and a few others discussed this anomoly and found a couple of possible solutions). The bottom margin conflicts with the top one in the div below it. I missed this in testing - thanks for the tip-off…

    # Simon Collison responded on 15th July 2004 with...

    Finally come up with a solution to the conflicting margins thing, Dr John. Not implemented site wide yet, but you can test it here (my test page).

    # Terry Hughes responded on 17th July 2004 with...

    Would the following style be acceptable as an alternative to using colour for visited links?

    a:visited {
    font: 1em Arial, Helvetica, sans-serif;
    color: #660066;
    text-decoration: none;
    border-bottom: 1px dashed;
    }

    # Simon Collison responded on 17th July 2004 with...

    I reckon so. I’m assuming (as I can’t see the other states) that it is the border-dash and colour that are changing. I like to see folks use the border element on links, coupled with a background colour and some padding perhaps, creating the illusion of a button. If you like the idea then definitely do it - I’m not one to suggest we should follow too many rules. SWo long as there is an obvious distinction between link states…

    # Simon Collison responded on 21st July 2004 with...

    There is now a fresh Logical approach to this technique, with leaner CSS and no extra markup:

    Ticked-off links Reloaded