Home arrow Style Sheets arrow CSS3 Dynamic Navigation Bars with HTML and jQuery
STYLE SHEETS

CSS3 Dynamic Navigation Bars with HTML and jQuery


In this second part of a two-part series on cascading style sheets, you will learn an alternate method to create dynamic navigation bars with the help of a little HTML and the jQuery animate() method.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
June 28, 2011
TABLE OF CONTENTS:
  1. · CSS3 Dynamic Navigation Bars with HTML and jQuery
  2. · Horizontally Animating Navigation Buttons

print this article
SEARCH DEVARTICLES

CSS3 Dynamic Navigation Bars with HTML and jQuery
(Page 1 of 2 )

If you think that you already knew all about the “background-position” CSS property, or that its functionality was limited to statically positioning background images within web page elements, you should check out this tutorial. In an approachable fashion, you’ll learn how to construct an animated navigation bar by using the property in question along with a few straighforward jQuery methods. 

In the first installment of this two-parter (CSS Animated Navbars), I developed an introductory example, which demonstrated how to couple the “background-position” property to jQuery’s "animate()” method, in order to build up our navigation bar. Thanks to the versatility offered by the pertaining method, it was really easy to vertically animate the bar’s buttons, creating an eye-catching mouse over effect, quite different from the ones that can be implemented with plain CSS.

Being the library’s workhorse - at least when it comes to animating different properties of an HTML element - the “animate()”method can be used in all sorts of clever ways. In this final episode of our two-part tutorial I’ll be showing you another approachble example - how to use the method, but this time for horizontally animating the elements of the earlier navigation bar.

Getting a Bit More Creative: Implementing a Variation of the Original Navigation Bar

As noted in the introduction, it’s fairly easy to tweak the behavior of the navigation bar created before, so that its buttons can be horizontally animated with jQuery. But before we come to that point, first it’s let's define the bar’s base structure. 

In this particular case, I’ll be following a typical approach, since the bar’s skeleton will be seated on top of an unordered list. The following web page accomplishes this in a snap. Check it out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic nagivation bar using the 'background-position' CSS property</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="js/buttons.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <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>
    <div id="main">
        <h2>Main section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

If you had the chance to take a peek at the preceding tutorial, the above code fragment should be familiar to you, as the markup of the navigation bar is composed of the aforementioned unordered list, which has been used as a wrapper for the corresponding links.

With this simple – yet clean structure up and running already, the next logical step is to spice up its visual presentation with some straightforward CSS styles.

Polishing the Navbar’s Appearance: Defining a Simple CSS File

Providing the navigation bar look with a more appealing appearance is as simple as styling its links and the wrapping unordered list. In this case there’s a little catch: since the purpose here is to horizontally animate the, it’s necessary to use a different CSS sprite that permits us to implement this effect.

To better understand how this brand new sprite will be used in the creation of this animation, be sure to download the navigation bar’s supporting files here.

Having clarified that, take a look at the following CSS file, which performs the styling process:

(css/styles.css)

body {
    padding: 0;
    margin: 0;
    background-color: #1577a4;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #1592cc; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 800px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
/* navigation bar */
ul#navbar {
    list-style: none;
    width: 652px;
    padding: 0;
    margin: 0 auto;
    overflow: auto;
}
/* list items in navigation bar */
ul#navbar li {
    float: left;
    width: 162px;
    height: 57px;
    margin-right: 1px;
    background: transparent url("../images/sprite_vertical.png") no-repeat;
}
/* anchors in navigation bar */
ul#navbar li a {
    display: block;
    width: 162px;
    height: 57px;
    text-indent: -9999px;
}
/* 'About Us' button */
ul#navbar li#about {
    background-position: 0 0;
}
/* 'Services' button */
ul#navbar li#services {
    background-position: 0 -57px;
}
/* 'Products' button */
ul#navbar li#products {
    background-position: 0 -114px;
}
/* 'Contact' button */
ul#navbar li#contact {
    background-position: 0 -171px;
}


The above CSS styles are extremely easy to follow. Aside from defining the appearance of the H2 elements and paragraphs of the corresponding (X)HTML document (plus a few containers), they’re responsible for styling each button of the navigation bar, namely its “About Us”, “Services”, “Products” and “Contact” sections.

Here, it’s clear to see that this process is achieved by changing the X,Y coordinates of the provided CSS sprite, so if you haven’t done so already, go ahead and download the supporting material right away.

So far, so good. If at this point you test the navigation bar in its current state, it should look similar to this:



Admittedly, its appearance is quite appealing, but also pretty boring as well, as its buttons are simply static elements. Well, it’s time to fix this issue and to bring them to life with jQuery! 


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