Create Accordion Menu Using CSS3 Transition

There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, we'll see how to make an accordion menu using CSS3 transition. It works on most modern browsers that support CSS3.

HTML Markup

The HTML markup of accordion menu is simple:

<div id="accordion">
    <div class="item">
        <a href="#">Products</a>
        <p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

We wrap the accordion menu in a div with id="accordion". Each item of accordion menu is described by a div with class="item". The title of each item is an A tag, and its content – P tag.

Basic CSS

We'll style our accordion menu to make it look good in most browsers:

#accordion .item {
    width: 400px;
    height: 30px; /* height = total height of A child element */
    overflow: hidden;

    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;

    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

There is one note in this CSS rule: by default, we don't want to show the content of menu items, so we make it hidden by specify the height of menu item equals to height of its title (including padding) and use CSS property overflow: hidden.

The menu looks like this:

To make the menu cool, I used CSS3 border-radius rules. It works on most modern browsers (Opera 10.50+, Firefox 3.5+, Safari 3+, Chrome 4+). If the browser doesn't support CSS3 border-radius, it will degrade gracefully to square corners.

Using CSS3 Transition To Slide Menu Content

It's time to use CSS3 Transition to show the menu content with accordion effect. Our CSS rule will be applied to each menu item like this:

#accordion .item {
    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
}
#accordion div:hover {
    height: 180px; /* height = total height of A and P child elements */
}

The CSS3 transition property has the following syntax:

transition: property duration timing delay;
-o-transition: ...;
-moz-transition: ...;
-webkit-transition: ...;

In our example, we need to slide the content of menu item, so the property is height. To make the slide effect, we use ease-in-out as timing. The effect will delay with 500ms.

The CSS3 transition property works with Opera, Safari and Chrome. Firefox will support it in next 3.7 version.

To show the menu content, we need to re-define it's height. When the content is shown, the height of menu item equals to total height of its A and P children (including padding).

When it's done, our menu will looks like this when move mouse hover a menu title:

So, the complete CSS code is:

#accordion .item {
    width: 400px;
    height: 30px; /* height = total height of A child element */
    overflow: hidden;

    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;

    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;

    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px; /* height = total height of A and P child elements */
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

You can see the code in action in the following demo. I hope this tutorial is helpful for you when decorate your website interface.