CSS Horizontal Accordion Menu

In 2 of my previous articles I covered how to create a vertical accordion menu using only CSS. In this tutorial I will be showing how to turn that around and create a horizontal accordion menu. So if you are not yet familiar with the basics of the accordion menu check out the HTML and CSS for the vertical accordion menu which we will be converting in this tutorial at the above two links.

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

First step we will be taking is turning .accordion on its side after all that direction its going so we need to swap the height and width numbers over.

.accordian{
width:600px;
height: 350px;
overflow:hidden;
list-style:none;
margin-bottom:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
background-color: #CCC;
}

Next we need to change the way our headings display and in which direction the panels expand. So again we swap height and width values with each other and change the transition to width instead of height (otherwise it will just pop straight out).

.accordian li {
height:60px;
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;
}

We also have to change the direction in which our rounded corners are done.

.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;
}

Now to change the hovers over so that when we hover over the links the panels will open left to right instead of up and down.

.accordian:hover li{
height:100%;
width:12%;
}
.accordian li:hover{
height:100%;
width:52%;
}

Now all the existing code has been changed over like last time you will have to fiddle with your width and height figure to match your typography on an individual basis.

Enjoy and see you again soon