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.
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. Continue reading
For a simpler version of the CSS Accordion Menu please visit here.
As requested here is a simple tutorial on how to create a vertical menu that slides out when moused over. Unlike the standard CSS vertical menu that pops out instantly or simply changes color instantly this menu will slide out smoothly using a few of the CSS3 standards.
Before beginning this tutorial it would be a good idea to familiarise yourself with the basics of CSS menu’s. I have a tutorial up on this already Basic CSS Hover menu. Make sure you still have the code from this as we will apply this slide out effect to the previous menu for practice.