Finishing a Casual Navigation Bar with CSS Sprites
(Page 1 of 4 )
If you’re interested in learning how to use CSS sprites to create engaging, standard-compliant navigational mechanisms that can be used on different web sites with minor modifications, you’ve come to the right place. Welcome to the final installment of a seven-part series that shows you how to build CSS sprite-based navigation bars. This series walks you through the progressive development of a couple of appealing links bars, which use a single background image to define the visual presentation of their sections.
And now that you know what to expect from this article series, it’s time to review the topics that were discussed in the last tutorial. In that article I demonstrated how to use a CSS sprite background image for styling the “hover” state of the sections of a sample links bar included in the structure of a fictional blog site.
The entire process was indeed simple, as it only required assigning the correct X and Y coordinates to the pertinent background graphic for each section being styled. It was that easy, really.
While the bar in its current version is fully functional, and its sketchy look is pretty appealing as well, it’s fair to say that it lacks an important feature that’s common in modern web design. It should visually inform users what section of the blog site they’re currently viewing. That’s exactly the characteristic that I plan to implement in this last episode of the series. This process will be easy to follow since it’ll be similar to defining the “normal” and “hover” states of the bar’s sections.
Are you ready to learn how to utilize the power of CSS sprites to make this sample navigation bar slightly more functional? Then click on the link below and begin reading!
Next: Review: defining the hover state of the navigation bar >>
More Style Sheets Articles
More By Alejandro Gervasio
