Home arrow Style Sheets arrow Create a Simple Transitioning Link Bar with CSS3
STYLE SHEETS

Create a Simple Transitioning Link Bar with CSS3


In this first part of a two-part article, you will learn how to use the “transition” CSS3 property to build a dynamic navigation bar. In our example, we'll use it to create a nifty rollover effect on each button of the bar, which should inspire you to use transitions in many other clever ways.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
September 29, 2011
TABLE OF CONTENTS:
  1. · Create a Simple Transitioning Link Bar with CSS3
  2. · Transitioning the navigation bar's background colors

print this article
SEARCH DEVARTICLES

Create a Simple Transitioning Link Bar with CSS3
(Page 1 of 2 )

As you know, the new properties that come with CSS3 open up all sorts of possibilities for designing eye-catching and more interactive web sites. While many of these properties have found a place in the toolbox of some web designers already, some of them still sit in a dark and forgotten corner, even though they have a promising future in modern web design.

A clear example of this is the somewhat overlooked “transition” property. As its name suggests, it permits users to create an animated transition between two states of an HTML element. There’s no shortage of options when it comes to using the “transition” property in different and creative ways. In a standard fashion, it can be used (among other things) for transitioning the background color of an HTML element, modifying its text, size and even its original shape. Nevertheless, the functionality of the property is such that it can be employed to easily enhance the behavior of several graphical user interfaces, such as navigation bars and drop-down menus.  

Moreover, it's really simple to rely on the property’s abilities to animate the buttons of a navigation bar or create pure CSS-based flyouts, without having to resort to complicated JavaScript snippets or heavy background images. And best of all, CSS transitions are supported by most modern browsers, except for Internet Explorer, which as usual is still one step back of the crowd.
      
To sum up, if the “transition” property has caught your attention already, in the lines to come I’ll be showing you how to use it in the implementation of a couple of dynamic navigation bars, which you’ll be able to customize at will.

Now, it’s time to demonstrate how to use the power of “transition” in the construction of the aforementioned navigation elements. Let’s go!

Building a customizable navigation bar

In consonance with the concepts deployed in the introduction, the first example that I plan to set up to demonstrate the functionality of CSS transitions will consist of developing a simple -- yet functional -- navigation bar. Since this common web page element must always be set down in solid markup, I’ll be using an unordered list to create its structure.

The following web page defines the navigation bar’s skeleton. Look at it:

<!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>Transitioned CSS3 navigation bar</title>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Transitioned CSS3 navigation bar</h1>
        <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. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <ul id="navbar">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </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. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>   

Certainly, the structure of this sample navigation bar is very easy to grasp. It's composed of a few links, which have been wrapped inside an unordered list. So far, nothing complicated or unexpected is happening here. However, this is about to change. It's time to add a dynamic touch to each section of the bar using the power of CSS transitions.

On the next page I’ll be polishing the visual presentation of the aforementioned sections with some basic CSS styles. Thus, to learn the fine details of this process, jump forward and read the lines to come.


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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials