Home arrow Style Sheets arrow Creating a Drop Down Menu in CSS3
STYLE SHEETS

Creating a Drop Down Menu in CSS3


In this second part of a two-part series on CSS transitions, we'll build on the navigation bar we created last time to create an animated drop-down menu.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
October 07, 2011
TABLE OF CONTENTS:
  1. · Creating a Drop Down Menu in CSS3
  2. · Using the functionality of CSS3 transitions

print this article
SEARCH DEVARTICLES

Creating a Drop Down Menu in CSS3
(Page 1 of 2 )

If you want to add a dynamic touch to your website's user interface without having to deal with the hassles and complexities of JavaScript, then you should check out the "transition" CSS3 property. In case its name doesn't ring any bells, the property permits you to create an animated transition between two states of an HTML element, pretty similar to what you can do with a movie clip in Flash. That sounds pretty interesting, right?

Moreover, if you've already read the previous part of this tutorial, it's quite probably that you're now familiar with using the "transition" property in a less traditional fashion. In that part I explained how to build a dynamic navigation bar employing only the functionality offered by the property.

It's valid to point out, though, that it's possible to use the power of CSS transitions in many other clever ways. To demonstrate that my claim isn't idle, in this final part of the tutorial I'll be showing you how to use them to construct an animated drop-down menu. And most important, the menu's sections will be animated without having to use client-side scripting.

Want to see how this popular interfacing element will be built in a few easy steps? Then begin reading!

Getting started: defining the menu's structural markup

Since my goal here is to show you how to build an animated drop-down menu using only the functionality offered by CSS3 transitions, the first step is to define the menu's markup. Below I built a basic web page, which creates the bare bones structure of the menu. Here's how this sample page looks:

<!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 drop-down menu</title>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Transitioned CSS3 drop-down menu</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>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Services</a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Products</a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Blog</a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Contact</a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </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>

If you've built hierarchical menus frequently, the above snippet should be pretty familiar to you. It includes a few nested unordered lists, which are the menu's building blocks. Also, to make things a little bit more realistic, I added to the menu some typical sections, such as "About Us," "Products," "Services" and so forth. Naturally, you're free to replace them with the ones that you like most or that best suit your needs.

All in all, at this moment nothing especially interesting is happening here, right? After all, semantically structuring a bunch of ordered lists is something that you've probably done hundreds of times before. But this is about to change. In the lines to come I'll be adding to the menu's skeleton the CSS styles required to turn it into an animated interface.

To see how this will be done, click on the link below and keep reading.


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