In this tutorial we will learn how to create an accordion menu in pure CSS3. This menu was inspired in Futurico UI Pro by Vladimir Kudinov. As we will create it with CSS this will only work on browsers and devices that support the: target pseudo-class selector.
Step 1 – HTML Markup
Create an unordered list with an anchor tag and a span tag. Add a different id for each list item and link to this id with the anchor tag. To be able to style and open the accordion when we click on it we need to use the :target selector. The target selector will only work if we will have a link that points to an id and when we click on that link the id becomes the target element. And with this way we are able to make the sub menu links visible.
Step 2 – Menu Layout and Basic Styles
First of all we’ll add some reset styles to the menu to clear the margins, paddings, etc.
Now let’s style the menu links. We will add a CSS3 gradient, some shadows and more basic styles for font, etc.
The menu will not have a fixed width. It will take the entire width of his parent, so if you want to give it a 300px width just create a div and give it the width that you want. In order to prevent layout issues we will give it a minimum width of 160px (110px width + 50px padding).
To style the span that will contain some numbers we’ll give a gray background color, some shadows and rounded corners.
Step 3 – Icons
To insert the icons we will use the: before selector, this selector inserts content before the selected element. So this way we are able to insert the icons and position theme.
The icons images that we will use have 24px width and 24px height. So we’ll position them on top left and add some margins to center the icons properly.
I’ve created a sprite image that contains all the icons (normal and hover state). The advantage of using sprites is that we are able to load all the icons at the same time (fewer requests) and as we only have one image that contain all icons the size will be inferior.
If you want to learn more about image sprites I recommend you to read this.
Step 4 – Sub Menu Links
To create the sub menus add another unordered list with the class of sub-menu inside of the list item that you want to have sub menus.
The styles of the sub menu links are almost the same. We’ll only change the colors, shadows, etc. We also have added an “em” tag that will contain some enumeration.
Step 5 – Hover and Active states
For the hover and the current active link state we will change the gradient to a green one and also change the styles of the “span” to green. As in Futurico UI this accordion uses a pattern I have added it. You can choose if you want to use the pattern or the CSS3 green gradient. For the sub menu hover state only change the background color to a brighter one.
Step 6 – Show and hide the sub menu
We’ll give 0px height to the sub menu to hide it and also add a transition slide effect. In order to make the slide transition work we need to give a fixed height to the sub menu. So if you want to add a different number of links to each sub menu you need to add a different height to each sub menu according to how many links you have. As I only have three links I use 98px height, if you want to make it automatic add a 100% height value but the slide effect will not work.
We have finished this Pure CSS3 Accordion Menu. Hope you like it and don’t forget to live some feedback or any question you have in the comments.