Home arrow Style Sheets arrow Defining a Navigation Bar`s Hover State with CSS Sprites

Defining a Navigation Bar`s Hover State with CSS Sprites

In this penultimate part of the series, I show how to use the previous CSS sprite background image to define the look of a casual, artistic blog navigation bar in its “hover” state. The simple styling process shouldn't give you any major problems when you use this approach to build a navigation bar for your own websites.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
March 08, 2010
  1. · Defining a Navigation Bar`s Hover State with CSS Sprites
  2. · Review: using CSS sprites to define the blog navigation bar's normal state
  3. · Defining the navigation bar's hover state
  4. · Linking the CSS code to the blog's markup

print this article

Defining a Navigation Bar`s Hover State with CSS Sprites
(Page 1 of 4 )

Among the diversity of techniques that can be applied nowadays in the development of modern websites, CSS sprites are definitively one of the most popular with many web designers, as they allow you to build with relative ease several interfacing elements, such as navigational bars, interactive HTML forms and so forth by using something as trivial as a single background image.

Even though the logic that stands behind CSS sprites is remarkably simple, the clever manipulation of the background graphic assigned to a given HTML element through its X and Y coordinates permits you to create appealing, highly-responsive graphic interfaces without having to rely on JavaScript.

To demonstrate how useful CSS sprites can be in a real-world project, in the  previous installment I started constructing the navigational bar of a sample blog site. The example made use of a background image to define the visual presentation of the “normal,” “hover” and “active” states of its sections, all in one go.

Admittedly, the example links bar in its current version is entirely functional, but the CSS code developed so far was used only to style its “normal” state. This doesn't leverage the full potential of its CSS sprite image. To address this issue, in this penultimate part of the series I’ll be adding to the landing page of this fictional blog site the CSS styles required to define the look of the bar when the mouse is placed over its sections.

Are you ready to learn how this styling process will be accomplished via CSS sprites? Then click on the link below and start reading right now!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials