Create Accordion Menu Using CSS3 Transition

accordion menu 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:

menu Create Accordion Menu Using CSS3 Transition

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:

accordion menu Create Accordion Menu Using CSS3 Transition

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.

Posted in: CSS

12 Comments

  1. Hi.
    Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly.
    Thanks.

    Reply
  2. Question, how do you keep the window panel open even when the mouse is no longer hovering over the selected link?

    Reply
  3. Awesome! Thanks for sharing especially with a non css person like myself. I have just one question. Is there a way to make one of the menus expand by default?

    Reply
  4. Great Tutorial and great output.
    I was looking for something like this and you have really simplified the entire process.
    Thanks a lot.
    You have saved me a lot of pain :)
    Best wishes.

    Reply
  5. Your code might be a life saver, all the previous accordion menus I have tried their javascript did not jive with other jjavascript on the page. I hope to come back and comment and let you know if it works- but if I don’t – i want to let you know that i really appreciate the work have done. So far it works exactly how you claimed it would :-) Now comes the tricky part and customizing it for the site and crossing my fingers. Thanks again!

    Reply
  6. Many thanks for the tutorial and for the height:auto fix — this is exactly what I was looking for. You guys rock!

    Reply
  7. great tutorial and blog.. thanks
    I tried this out in a WordPress post (as i would like to adapt as a FAQ page)
    …with just ONE item as a test and used the SAME css and html mark-up as above

    In Firefox 3,6 it all worked great – transition and content showing fine

    In Chrome, IE9 ,Opera 10,0 and Safari 5,0 the transition worked great but NONE of these show any of the content inside the p tag ….. i checked the mark-up and it all appears fine ..it is copied and pasted as a test after all

    Why is that? anyone assist please?

    thanks

    Reply

Leave a Reply