CSS Sprites

Sound Strategic Thinking & Cut Through Creative

This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. Instead of trying to manage huge amounts of images, everything is packed into just one file, which means the browser will only have to download one file instead of making multiple requests, and its just a lot easier to manage. The menu is displayed by manipulating the background-position property to display individual sprites in the image. There are no drop-downs attached to the menu, but it shouldn’t be hard to add them in which I may do in the future.

How to use:

Basically make one large image containing all of the buttons needed for your menu, the normal state along the top, the hover state along the bottom. Also they all need to be the same size:
Menu

In this example all the buttons are square, but there is no reason they can’t be any size and shape by using transparency in your image, just make sure they line up in the grid layout.

For the HTML markup simply use an unordered list with a link for each of your buttons like this:

<ul id=”menu”>
<li><a href=”/our-team/”></a></li>
<li><a href=”/our-profile/”></a></li>
<li><a href=”/your-teeth/”></a></li>
<li><a href=”/special-occasions/”></a></li>
<li><a href=”/your-membership/”></a></li>
<li><a href=”/contact-us/”></a></li>
<li><a href=”/useful-links/”></a></li>
<li><a href=”/book-your-appointment/”></a></li>
</ul>

add some basic CSS to make the list horizontal:

<style type=’text/css’>
ul#menu {
list-style: none;
margin: 0;
padding: 0;
}
ul#menu li {
float: left;
}
</style>

To initialise it you must define a few settings:

grid: the path to the image you created for the menu
buttonwidth: the width of each sprite in pixels
buttonheight: the height of each sprite in pixels

There are also some optional settings

animate: what effect should be triggered when hovering over a button, can be: ‘opacity’, ‘height’, or ‘width’
speed: the duration of the animate effect: ‘fast’, ‘slow’, or a duration in milliseconds
easing: the easing equation to use for the animation: ‘swing’ or ‘linear’ or add the easing plugin for many more options

Examples:

$(‘#menu’).spritemenu({
grid: “images/menu.png”,
buttonwidth: 110,
buttonheight: 80,
speed: ‘slow’,
easing: ‘easeOutBounce’, //You need the easing plugin for anything other than ‘swing’ or ‘linear’
animate: ‘height’
});

$(‘#menu2’).spritemenu({
grid:”images/menu.png”,
buttonwidth: 110,
buttonheight: 80,
});

Please note that using this plugin, your menu will not degrade gracefully if a user does not hae javascript enabled. I’d suggest using a tool like firebug, and once you have everything looking how you want it, copy the CSS into your own .css file. This plugin is best-suited to very rapidly develop and test out a menu. This article goes through the process manually and is what this plugin is based on.

Download Sprite Menu:

Whole package with Examples
Just the javascript