Style Sheets
  Home arrow Style Sheets arrow Building CSS Sprite-Based Navigation Bars
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Building CSS Sprite-Based Navigation Bars
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2010-02-26

    Table of Contents:
  • Building CSS Sprite-Based Navigation Bars
  • Defining the navigation bar's structural markup
  • Defining the CSS styles for the normal state of the navigation bar
  • Including the previous CSS styles in the sample web page

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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!

    More Style Sheets Articles
    More By Alejandro Gervasio


       · CSS sprites are a handy technique that can be used for building high-responsive GUI...
       · How would you write the CSS so that the hover state will work in IE6? Since you...
       · It’s easy. If you still need to support IE 6, just apply (selectively) the styles...
     

    STYLE SHEETS ARTICLES

    - Styling Pseudo Classes with the RGBA CSS3 Pr...
    - Controlling Overall Transparency of an HTML ...
    - Altering the Border Opacity of an HTML Eleme...
    - The RGBA CSS3 Property: an Overview
    - Using Span Tags to Include Logos in Web Pages
    - Using a Single H1 Element to Include Logos i...
    - Combining Divs and H1 Elements to Include Lo...
    - Semantically Including Logos in Web Pages
    - Adding Text Indentation to Style Code Blocks...
    - Decorating Line Numbers in Code Blocks Style...
    - Changing the Color of Code Lines with CSS
    - Using Ordered Lists to Style Code Blocks wit...
    - Using a Zebra Background Effect to Style Cod...
    - Displaying Rounded Corners Built with CSS3 i...
    - Building Rounded Corners with CSS3`s -webkit...







    © 2003-2010 by Developer Shed. All rights reserved. DS Cluster 12 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek