Your Customers are Mobile, you will be too …

This is the second part of my tutorial on how to create a slide out accordion menu. In this section we will be covering how to do the CSS to make the Accordion Menu work. If you are not aware of how to do the HTML side of the menu please check out the previous tutorial before continuing with this tutorial. This tutorial is mostly basic CCS2 but with a little bit of CSS3 thrown in to make the menu items slide out smoothly without the use of Javascript.

We will create a vertical Accordion Menu in this tutorial and in the next article we will show you how to convert it to a horizontal menu using the same HTML code we used in the last article.

For a simpler version of the CSS Accordion Menu please visit here.

CSS Accordion Menu: The CSS side

First we need to give our accordion a maximum height and a width. We don’t want the text in the <p> tags visible until the accordion has been hovered so we need to set our overflow to hidden. We will also get rid of the bullets from the list, the menu a background color and round off the corners off the menu to make it look a little softer.

So our beginning code should look something like this.

.accordion{
  width:600px;
  overflow:hidden;
  list-style:none;
  margin-bottom:10px;
  background:#ccc;

  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -o-border-radius:10px;
  border-radius:10px;
}

Next we need to set up the accordion list items CSS for their natural state.

.accordion li {
   height:20%;
   width:100%;
   -moz-transition:height 0.3s ease-out;
   -webkit-transition:height 0.3s ease-out;
   -o-transition:height 0.3s ease-out;
   transition:height 0.3s ease-out;
   overflow: hidden;
}

In this example we have 5 items in our menu so we divided it up into 5 equal parts, thus the 20% for our height. We want our sections to come right across so naturally we set that to 100%. Overflow was set to hidden as we do not want the text appear till we hover over it. The transition lines relate to the smooth sliding effect we are giving our accordion. This property was introduced with CCS3. In this case we have set the height to ease out over .3 of a second when when ever it is increasing or decreasing in height.

So that we retain the nice rounded of shape to our menu we will apply the following code to the first and last list items using the first-of-type and last-of-type psuedo-classes.

.accordion li:first-of-type{
   -moz-border-radius:10px 10px 0 0;
   -webkit-border-radius:10px 10px 0 0;
   -o-border-radius:10px 10px 0 0;
   border-radius:10px 10px 0 0;
}
.accordion li:last-of-type{
   -moz-border-radius:0 0 10px 10px;
   -webkit-border-radius:0 0 10px 10px;
   -o-border-radius:0 0 10px 10px;
   border-radius:0 0 10px 10px;
}

By rounding off the top of the first item and the bottom of our last item we maintain the shape we wanted.

 

.accordion:hover li{
  height:10%;
  width:100%;
}
.accordion li:hover{
  height:60%;
  width:100%;
}

And our CSS for a vertical accordion menu is complete. Well the basic structure is. In some cases you may have to fiddle with the figures for the sizes to get it right for you depending on your typography etc but that is the back structure.

In the next article we will turn it on its side and have it run horizontally.

2 Responses to CSS Accordion Menu: CSS coding

  • Hi, is there a way to see a live demo of this code? Cheers

    • WordPress didn’t like it when I attempted to put a sample of it in here. It interferred with any other menus on the page. I will work on a YouTube version of this sometime over the next week or so.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: