Building CSS Sprite-Based Navigation Bars
(Page 1 of 4 )
In this first part of a series, we'll start building a stylish navigation bar which uses a combination of image replacement and CSS sprites to define the visual presentation of its sections. The resulting bar will have a clean, professional look that would be at home on any corporate web site.
The phrase "Content is king" should be considered one of the ten commandments of web design, as it conceptualizes and justifies the existence of most websites. While the concept still has a healthy life ahead of it, unfortunately it's grown a little outdated -- in the sense that a site must not only deliver high-quality content to its visitors, but do so in a truly attractive way.
Of course, I'm not saying that all RFCs should look like the work of a Michelangelo, but I guess you get the idea. Without a doubt, an eye-catching header or even a stylish navigation bar can make a huge difference when it comes to attracting users to a website, because humans (for good or for bad) are visually oriented creatures.
The challenging part of this story is that conscientious web designers must create engaging, yet accessible, user interfaces to satisfy content-hungry users without writing large amounts of ugly, non-semantic markup. The good news, however, is that there are a few proven approaches that make this a painless process, such as image replacement, CSS sprites, unobtrusive JavaScript and so forth.
What's more, the clever implementation of some popular image replacement techniques, along with the use of CSS sprites, allows you to build, among other common interface elements, professional-looking navigational bars that use clean, uncluttered markup. In addition, the advantages introduced by CSS sprites provide a great level of control and responsiveness when defining each state of the bars' sections, not to mention the reduction in the number of HTTP requests that must be sent to the web server.
Given the relevance of the image replacement/CSS sprites combination to professional web design, in this series of articles I'll be explaining how to use this combination of techniques to create two different types of navigation bars. The first one will have a rather corporate look, while the second one will have a more "artistic," informal appearance.
Now, it's time to start building the first of these navigation bars. Let's get going!
Next: Defining the navigation bar's structural markup >>
More Style Sheets Articles
More By Alejandro Gervasio
