Comments(0)
Loading ...
Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar results.
The end goal is to create a navigation menu that loads quickly, and does not require any dated JavaScript for hover effects. If you’re still using individual images for each menu item, it’s time to upgrade.
The Goal
This CSS sprite will keep HTTP requests down and increase load speed. For a more in depth explanation of CSS Sprites, take a look at
Chris Coyier’s article on CSS Tricks. He goes into a wider variety of uses, but this tutorial will focus on getting the navigation done for simplicity’s sake.
