Home » Labs »

Accordion Menu Using CSS3 Transitions

Accordion Menu Using CSS3 Transitions

We all like accordions and we use them to enhance our menus or to show content where space is limited. Let's explore how we can implement such a menu using nothing but CSS.

This is quite a challenge, especially for me since I'm keen on using Javascript for such enhancements. They key to this tutorial is to not use JS at all!

First, the basic structure.

We will be using a simple unordered list (ul) as the content container. The rule is simple: one list item(li) acts as the trigger for the one next to it, which holds the actual content that we're displaying with the accordion.

  1. <ul>
  2. <li class="hover"><a href="#li1">First</a>
  3. <li id="li1" class="content">...
  4. <li class="hover"><a href="#li2">Second</a>
  5. <li id="li2" class="content">...
  6. <li class="hover"><a href="#li3">Third</a>
  7. <li id="li3" class="content">...
  8. </ul>

Then, we hide the content LI`s

  1. ul li.content{
  2. height: 0;
  3. overflow: hidden;
  4. }
  5. ul li:hover + li.content, li.content:hover, li.content:focus{
  6. height: 200px;
  7. }

We're using height:0 and then setting the height to 200px because we will be animating on that property. Note: animating from display: none to display: block will not work. ;-)

Next, the magic

  1. ul li.content{
  2. ...
  3. transition: height .5s .2s ease-in-out;
  4. }

This tells the browser that instead of quickly swapping between the two height values, 0 and 200 pixels, it should animate between them, a process called tweening.
The transition property comes with CSS3 and is simply awesome, allowing us developers to create animations, or tweens, without having to rely on Javascript and without having to worry about cross-browser compatibility.

Above is the shorthand notation for the transition property. Here is the expanded notation:

  1. ul li.content{
  2. ...
  3. transition-property: height;
  4. transition-duration: .5s;
  5. transition-delay: .2s;
  6. transition-timing-function: ease-in-out;
  7. }

The expanded notation also makes it easier to understand what the values in the shorthand notaion mean. Here is a breakdown: transition: properties duration delay easing. Here's a tip: you can tell the browser to animate on all of the properties that change between two states by using the all value for properties.

The Catch

With all this nice animating power built right into the browser, things sound just too good to be true, eh? Well, yeah.

First, this does not work in IE8 or below. Or in older versions of the cool browsers. The good thing, though, is that the degradation is graceful. Old browsers simply don't know what to do with the transition property, so they skip it.

The second thing you need to take into account is that there is a lot, a lot, of code duplication. Each major browser vendor needs to have the transition property prefixed with their specific prefix. What this means is that your CSS code will look like this:

  1. ul li.content{
  2. ...
  3. -o-transition: height .5s .2s ease-in-out;
  4. -webkit-transition: height .5s .2s ease-in-out;
  5. -moz-transition: height .5s .2s ease-in-out;
  6. transition: height .5s .2s ease-in-out;
  7. }

I think that's a small price to pay for how awesome the transitions actually are!

Update: CSS Transitions have been reported as broken in Firefox 3.6.6. This is probably a slip on Mozilla's side and will be addressed soon.

Leave a Comment :




Page generated in: 0.11s