This tutorial will explain how to create a pure CSS accordion menu. There is no javascript involved in this process. Simply valid HTML, CSS and 4 images are used. The example we will be using is relatively simple but could be extended to create Accordions for different types of content.

1)The Theory

First of all let me explain the theory behind this. We Have 4 images. Each image has a name and an icon. The icon parts of the images are initially hidden but when we hover over a link we want that image to display full width (including the icon) and shrink the other images. If you aren’t following me then check out the picture below and you’ll see what I mean.

CSS Accordion Menu

2)The HTML

So now you understand what we are creating lets get moving. When it comes to the HTML you really couldn’t ask for anything simpler.













All we are doing here is creating an un-ordered list with some links. Most navigation structures follow a simliar structure. The only thing to notice is that the list has the id “accordion” and that each link needs a unique id.

3) The CSS

This is where the fun starts. The CSS should look like the following.

#accordion {
    width: 484px;
    padding:0;
    margin: 100px auto;
    list-style:none;
    list-style-image:none;
}

#accordion li {
    display:inline;
}

#accordion a {
    float: left;
    width:120px;
    height: 50px;
    overflow: hidden;
    text-indent: -9999px;
    border-right:1px solid #3F0900;
}

a#home {
    background:#7F1300 url(images/home.png) no-repeat;
}
a#blog {
    background:#7F1300 url(images/blog.png) no-repeat;
}
a#contact {
    background:#7F1300 url(images/contact.png) no-repeat;
}
a#feed {
    background:#7F1300 url(images/feed.png) no-repeat;
}

/* IE6 doesn't recognize ul:hover */
#accordion:hover a {
    width: 93px;
}

#accordion:hover a:hover {
    width: 200px;
    overflow: auto;
}

So what is happening here? I won’t explain all of it but the important bits are:

The #accordion width is the width of the four images combined without the icons. In this case my images were 200px wide but only 120px wide when you took the icons away. So 120px * 4 (+4px for the image borders) is 484px. Also display the “#accordion li” inline so they line up horizontally.

#accordion {
    width: 484px;
    padding:0;
    margin: 100px auto;
    list-style:none;
    list-style-image:none;
}

#accordion li {
    display:inline;
}

With the actual links we have already gone over the width of 120px. We set the text indent to -9999 so that the actual text within the links doesn’t show. This is for accessibility more than anything else. In this case we are also giving them a right border to show where the images are split. This could be done in the image rather than in the CSS.

#accordion a {
    float: left;
    width:120px;
    height: 50px;
    overflow: hidden;
    text-indent: -9999px;
    border-right:1px solid #3F0900;
}

Each link we gave an id we set our images we have created as a background. Pretty simple.

a#home {
    background:#7F1300 url(images/home.png) no-repeat;
}
a#blog {
    background:#7F1300 url(images/blog.png) no-repeat;
}
a#contact {
    background:#7F1300 url(images/contact.png) no-repeat;
}
a#feed {
    background:#7F1300 url(images/feed.png) no-repeat;
}

Now the fun part. What we are doing here (#accordion:hover a) is shrinking all of our links to 93px when we hover over the “#accordion” list. Why? Because we need an extra 70px to be able to fully expand our hovered link. So (484px - 200px(fully expanded width)) / 3(remaining links) is… drum roll please… well its about 93px anyway.

#accordion:hover a {
    width: 93px;
}

#accordion:hover a:hover {
    width: 200px;
    overflow: auto;
}

Finally use the (#accordion:hover a:hover) to select the link we are actually hovering over and make its width 200px.

A Note on Compatibility

This script will work fine on IE7+ and Firefox but, as usual, there are problems with IE6. It’s not a massive problem its just that IE6 doesn’t have support for the CSS tag “:hover” on anything other than an anchor tag. This means that the final two rules won’t work as they are trying to :hover on a un-ordered list tag. The menu will still look and work fine, but you lose the hover functionality.

Conclusion

So there you have are perfectly valid pure CSS Accordion Menu. As I said this use of an Accordion doesn’t have to limited to a menu. You could use it for content and all sorts. Be creative.

For further reading why not check out this article at CSS Newbie where my idea for this tutorial came from.

View the Demo Download the ZIP file

More?

If you enjoyed this post, please consider promoting it.

Remeber to subscribe to the feed and get future articles delivered to your feed reader.

If you want to discuss this tutorial or any other thoughts you have then you can do so over on our fourm.

Comments