Code: spriteNav

Here’s a really simple way to make mouseover effects for your navigation without the need for any JavaScript or image preloading. It’s called spriteNav because it involves a technique very similar to the way that 2D sprite animation was created for old video game consoles.

1

To start out we need to create a graphical “sprite sheet” that contains our “on” and “off” button states. I created an example image in GIF and PNG format. The PNG format can be opened in Fireworks MX+ and modified to suite your needs. Anyway, here’s the example images:

nav.png

Download Fireworks Source PNG

The file has both “on” and “off” button states. We will use CSS to display the appropriate state on :hover and non :hover events.

2

Now let’s build the html for our navigation. I’m building the nav as an unordered list because it is easy to maintain and follows semantics. Since navigation is a list of areas within the site, it makes sense to make the navigation an html list… right? Here’s our HTML code:

1. <ul id="nav">
2. <li><a href="#">Nav Point</a></li>
3. <li><a href="#">Nav Point</a></li>
4. <li><a href="#">Nav Point</a></li>
5. <li><a href="#">Nav Point</a></li>
6. <li><a href="#">Nav Point</a></li>
7. </ul>

Notice that we gave the < ul > tag an id of “nav”, this is important for the next step.

3

It’s time to create our CSS that will format this simple unordered list into a pretty navigation block. Here we go:

1. #nav,#nav li {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. }

This tells the browser not to indent or display the little bullets that are normally associated with unordered lists.

1. #nav a {
2. width: 94px;
3. height: 26px;
4. background: url(nav.png) no-repeat;
5. color: #666;
6. display: block;
7. font: bold 12px/26px Arial, sans-serif;
8. text-decoration: none;
9. text-indent: 14px;
10. }

This bit of code forces all links within the navigation list to use our nav.png image as its background (make sure you reference the image correctly). The “display:block” part allows the link to receive a click or :hover anywhere within the specified width and height attributes. The “/26px” part make the text vertically centered within each button.

1. #nav a:hover,#nav a:focus,#nav a:active {
2. background-position: 0 -26px;
3. color: #900;
4. text-decoration: none;
5. }

This part tells the browser to move the background image up 26 pixels when a link is moused over, focused or active.

Example

Believe it or not, that’s it. All you have to do is put the above three steps together and you have yourself a very simple graphical navigation. I built an example page so that you can see what the navigation looks like when it’s all incorporated into one page. Have fun!

spriteNav Example