Home arrow Style Sheets arrow CSS3 Animated Navbars
STYLE SHEETS

CSS3 Animated Navbars


In this first part of a two-part series, you will learn how to create animated navigation bars using some simple HTML, sprites, and the CSS3 (cascading style sheets) background-position property.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
June 28, 2011
TABLE OF CONTENTS:
  1. · CSS3 Animated Navbars
  2. · Defining Navigation Bar's with CSS3 and Sprites

print this article
SEARCH DEVARTICLES

CSS3 Animated Navbars
(Page 1 of 2 )

Backed up by a long existence, the “background-position” property looks like any other building block of the CSS specification. In many situations, however, first impressions tend to be a little bit tricky and misleading, and that’s exactly the case with this property. While its primary functionality is to position a given background image within an HTML element according to the specified X, Y coordinates (or generic values like left, right), it’s possible to use it in a more clever way and get quite impressive results, especially when building graphical user interfaces (GUIs).

The most glaring example where the property shines in all its splendor is during the construction of navigation bars, where the implementation of engaging mouse over effects is achieved thanks to the use of CSS sprites, a common technique that bases its functionality on showing portions of one or multiple background images by altering their X, Y values via the property in question.

While the bunch of hovering effects that can be accomplished with CSS sprites are quite remarkable, it’s possible to take them to the next level with jQuery. You may be wondering how this can be done. Well, since the library’s “animate()” method permits you to animate different properties of a web page element, it’s really simple to use this approach with its background position, in this way allowing you to create animated CSS sprites.

In this two-part tutorial I’ll be using the aforementioned technique in the development of a dynamic - yet semantic - navigational bar, which you’ll be able to tweak and customize with minor efforts.

Taking the first step: defining the navigation bar’s markup

Before you get into the details concerning the implementation of the animated navigation bar discussed in the introduction, first be sure to download the supporting files here, so that you can take a deeper look at them and grab the background image that I’ll be using later on.

The first step that must be taken is to define the navigation bar’s skeleton. As usual, this will be done by wrapping a group of links inside a plain unordered list. The following code fragment does this in a simple fashion: 

<ul id="navbar">
        <li id="about"><a href="#" title="About Us">About Us</a></li>
        <li id="services"><a href="#" title="Services">Services</a></li>
        <li id="products"><a href="#" title="Products">Products</a></li>
        <li id="contact"><a href="#" title="Contact us">Contact</a></li>     
</ul>

There’s not much that can be said about the previous markup, as its structure is self-explanatory. In this case, and for demonstrative purposes, I decided to create a navigation bar composed of a few typical sections, such as “About Us”, “Services”, “Products” and so forth.

So far, so good. Now that the navbar is seated upon a clean and semantic structure, it’s time to make its sections look a bit more appealing with CSS. This will be accomplished in the following segment.   


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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