Rob Barrett

Fast-loading CSS rollover menu items

Posted on March 17, 2008 at 11:31pm

I’ve just been going through a few design sites this evening, and it’s surprising how many nice looking sites have such slow-loading navigation images. What I mean is, you see the menu fine, but when you hover over a link you have to wait a second or two for the rollover state to download and show. I thought I’d just share the quick and easy method that I use for fast loading rollovers using CSS.

Taking my ‘Blog’ link as an example, you’ll see that the link is repeated three times in the same image — firstly, there’s the basic state; secondly, the rollover/hover state; and thirdly, the ‘current’ state (which shows when you’re viewing that page or section). Because they’re combined into one image, it means that all three states load at the same time.

Sure, it does mean a slightly longer initial loading time, but personally I prefer to wait that extra second while the entire page is loading and then have everything ready to view. In this particular case, we’re talking about adding 2 or 3 KB onto the total size, so it’s near enough to negligible.

For the basic link, I insert the following HTML (Using conditionals, the first code is shown on all non-Blog pages, and the second is shown on Blog pages):

<a href="#" class="blog"><span style="display:none">Blog</span></a>

<a href="#" class="blog current"><span style="display:none">Blog</span></a>

Then, I add this style to the stylesheet:

a.blog {
  background-image: url(../rb-images/nav-blog.gif);
  background-repeat: no-repeat;
  background-position: left top;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 48px;
  height: 59px;
}

The link height is set to one-third of the entire image height (177px), and the background is set to align to the top-left of that box.

This way, the white and orange states are hidden out of view, but still loaded onto the page. So then, all you then have to do for the hover and current states is move the alignment of the background, like so:

a.blog:hover {
  background-position: center;
}
a.blog.current {
  background-position: bottom;
}

Simple! Three different link styles, one image, one quick load!

---