CSS Accordion Menu: CSS coding

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.

Other Topics

CSS : Background colour running to the screen bottom,CSS : Text-transform command,CSS : IE and width &amp; height issues,CSS : Drop down menu,CSS :  Accordion Menu: CSS coding,CSS : Zoom property,CSS : Relative zoom,CSS3 : target-new Property ,CSS : 3-d push button effect ,CSS : Document for handhelds ,CSS : Invisible text ,CSS : Disappearing text or images in IE? ,CSS : Image replacement technique,CSS : Box model hack alternative,CSS : Centre aligning a block element,CSS : Class selector,CSS : Sticky Footer Layout,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector