Defining the Active State of Menu Sections for a CSS Sprite-Based Navigation Bar
(Page 1 of 4 )
In this third part of a series, I put the final touches on our sample navigation bar, which uses the functionality of CSS sprites to define the visual presentation of the “normal,” “hover” and “active” states of its sections. Constructing a graphic user interface like this is a two-step process. First, one creates a good-looking background image, and then tweaks its X and Y coordinates via CSS.
Originally coined in old the world of video games development, the term “sprite” has gone through a long rebirth process. Nowadays it’s used in web design for referencing a handy approach known as “CSS sprites,” which permits developers to create eye-catching, multi-state HTML elements directly manipulating a single background image.
While the underlying logic of this styling technique makes it applicable in a plethora of contexts and situations, where CSS sprites actually leverage all of their “magic” is in the construction of attractive, standard-compliant navigation bars. What’s more, when coupled with some of the most popular image replacement methods available today, CSS sprites put in the hands of web designers a powerful tool that allows them to easily build all sorts of navigational systems that are highly responsive, and don’t require triggering a large number of HTTP requests to work as expected.
Of course, I’m not saying that CSS sprites are a panacea that should be used on every possible occasion. As with many other web design techniques, it's a cardinal sin to abuse or misuse them. However, to demonstrate how useful they can be in specific cases, in the two articles that preceded this one, I started creating a stylish navigational bar whose sections were styled by employing only one background image, or expressed in other words, a set of CSS sprites.
So far, in the articles in question I showed the CSS code required for defining the visual presentation of the “normal” and “hover” states of the sections that make up the navigational bar. It's still necessary to provide the bar with the ability to display the active states, so users can know quickly what section they’re currently viewing.
Keeping this requirement in mind, the implementation of this additional feature will be discussed in the lines to come. To learn more about it, click on the link below and begin reading!
Next: Review: defining the navigation bar's active and hover states >>
More Style Sheets Articles
More By Alejandro Gervasio
