ingenious little css trick

[ibneko]

I was looking at http://orderedlist.com/, trying to see how the site was put together. There's an interesting trick: his/her menu bar is set up in a rather interesting way, in the same way yahoo (and some other sites) load up one entire sheet of mini icons, then show the correct one as required.

It puzzled me at first, because it wasn't text since you couldn't select the letters, and it didn't act like an image (you couldn't drag the image elsewhere).

Here's his nav bar:
http://orderedlist.com/images/nav.gif

And here's the relevant code:

#header ul {width:544px; height:30px; top:35px; right:0; list-style-type:none; background:url(../images/nav.gif) no-repeat; position:absolute;}
#header li {float:left;}
#header ul a {position:absolute; height:30px; top:0; text-indent:-9999px; overflow:hidden; background:url(../images/nav.gif) no-repeat top left;}
#header #hom a {width:53px; left:0; background-position:0 0;}
#header #art a {width:73px; left:53px; background-position:-53px 0;}
#header #por a {width:87px; left:126px; background-position:-126px 0;}
...
#header #hom a:hover {background-position:0 -30px;}
#header #art a:hover {background-position:-53px -30px;}
#header #por a:hover {background-position:-126px -30px;}
...
#body_hom #header #hom a {background-position:0 -60px;}
#body_art #header #art a {background-position:-53px -60px;}
#body_por #header #por a {background-position:-126px -60px;}
...


So essentially, when you hover over it, it'll change the background position to a -30px, which would load the "hilighted" words. Spiffy.