ireckon blog

One image CSS menus

Posted by: Bart on 24 Jun 2008 @ 9:32 am Category: Web Design

If you are a frequent world wide web surfer, you might have noticed menus on some websites where the hover state of a navigation item takes a second to load. This is probably because the menu is image based and the inactive and hover states are created by two separate images. This means that the hover state image won't load until the user moves their mouse over it.

I see this happening on a regular basis when visiting different websites, and some of them are quite popular websites. Saying all this though, it doesn't actually break anything on your site and users can still use it as per normal. However, wouldn't it be nice to avoid this in some way? And why force unnecessary additional server requests when the rest of the website has already loaded?

Well having separate images for your active and hover states on a menu is now kind of old school and there is a more efficient way of doing it. Using CSS, its quite easy to use one whole image for all your menu items, whether it'd be an active, hover, inactive, or visited state. I recently used this technique when creating the new Morningside Australian Football Club website. It was especially convenient as each navigation item is quite large and therefore if I did it the "old school" way, the loading time of each menu item would easily get noticed.

All I wanted was an inactive and a hover state for my menu, so I put both states for all menu items in one image which looks like this:

Now in my CSS, I used the same background image for all tags in the menu list like so:

#menu li a{
text-indent: -9000px;
height: 146px;
display: block;
background: url(../images/global/bg-menu.jpg) no-repeat;
}

And all I had to do for each item is was to define the width of each tag and the background position of the image for the inactive and hover states like so:

#menu li.club-info a{
width: 131px;
background-position: 0 -146;
}

#menu li.club-info a:hover{
background-position: 0 0;
}

Tip: You can easily find out the position of each background menu item by using the slice tool in your image software (if it has that feature).

So as you can see, it's not really that hard to implement this technique and the more often you do it, the better and quicker you become at using it. It will also in turn make your websites stronger and quicker to load.

If you research this implementation further, you will easily find more details on how to use it for your other link states as well, but I'm sure you are web savvy enough to figure it out on your own. :)

Back to blog home

Comments

Leave a comment

Name (required)
Email (required, not published)
	Enter code you see in image