Benjamin Juang (ibneko) wrote,
Benjamin Juang
ibneko

ingenious little css trick

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.
Tags: css, html
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments