In this tutorial we will be covered how to create an accordion menu that once we mouse over an item in the menu it will expand smoothly to show the content inside of it. We will be doing this using CSS3 with no Javascript. I will be splitting this article up into 2 parts, the HTML and the CSS.
For a simpler version of the CSS Accordion Menu please visit here.
The Accordion Menu’s HTML
The accordion menu starts off as an unordered list with its own class attached to it to give us control over it and each of our categories will become a list item inside of that list. Just in case we wish to make the content of each item look different say different background colors for example we will give each of our list items a class of its own.
So our basic code should look something like this.
<ul class="accordion">
<li class="slide1></li>
<li class="slide2"></li>
<li class="slide3"></li>
<li class="slide4"></li>
<li class="slide5"></li>
</ul>Inside of each of these list item we are now going to create a div which will hold the heading of each item and a paragraph of text for it to display when moused over. In our finished product unless you are moused over the menu item only the heading will appear.
So inside each of the list items we need to add the following.
<div>
<h3>Slide one heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate lacinia diam a eleifend. Ut tempor sapien vitae turpis placerat bibendum. Phasellus nec magna ut arcu vehicula gravida vel eu neque. Maecenas felis metus, venenatis ac tincidunt sit amet, iaculis quis nunc. Suspendisse fermentum neque id neque faucibus nec condimentum neque fermentum. Quisque in quam eget nisl iaculis pharetra id commodo erat. Vivamus vel nisi sit amet arcu tempus laoreet. Duis ut faucibus lorem. Proin suscipit tristique felis sed accumsan. Sed blandit, sapien accumsan gravida vestibulum, dui mi porta libero, ac elementum nulla magna tristique justo. Phasellus semper ipsum vel</p>
</div>Naturally the lorum ipsum text I have inserted is replaced by the text you wish to have in there. This needs to be done with each and every one of our list items. Once this is done the HTML side of our work is complete. And we move on to the CSS side of things.
Finished code should look like this:
<ul class="accordion">
<li class="slide1">
<div>
<h3>Slide One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate lacinia diam a eleifend. Ut tempor sapien vitae turpis placerat bibendum. Phasellus nec magna ut arcu vehicula gravida vel eu neque. Maecenas felis metus, venenatis ac tincidunt sit amet, iaculis quis nunc. Suspendisse fermentum neque id neque faucibus nec condimentum neque fermentum. Quisque in quam eget nisl iaculis pharetra id commodo erat. Vivamus vel nisi sit amet arcu tempus laoreet. Duis ut faucibus lorem. Proin suscipit tristique felis sed accumsan. Sed blandit, sapien accumsan gravida vestibulum, dui mi porta libero, ac elementum nulla magna tristique justo. Phasellus semper ipsum vel</p>
</div>
</li>
<li class="slide2">
<div>
<h3>Slide Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate lacinia diam a eleifend. Ut tempor sapien vitae turpis placerat bibendum. Phasellus nec magna ut arcu vehicula gravida vel eu neque. Maecenas felis metus, venenatis ac tincidunt sit amet, iaculis quis nunc. Suspendisse fermentum neque id neque faucibus nec condimentum neque fermentum. Quisque in quam eget nisl iaculis pharetra id commodo erat. Vivamus vel nisi sit amet arcu tempus laoreet. Duis ut faucibus lorem. Proin suscipit tristique felis sed accumsan. Sed blandit, sapien accumsan gravida vestibulum, dui mi porta libero, ac elementum nulla magna tristique justo. Phasellus semper ipsum vel</p>
</div>
</li>
<li class="slide3">
<div>
<h3>Slide Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate lacinia diam a eleifend. Ut tempor sapien vitae turpis placerat bibendum. Phasellus nec magna ut arcu vehicula gravida vel eu neque. Maecenas felis metus, venenatis ac tincidunt sit amet, iaculis quis nunc. Suspendisse fermentum neque id neque faucibus nec condimentum neque fermentum. Quisque in quam eget nisl iaculis pharetra id commodo erat. Vivamus vel nisi sit amet arcu tempus laoreet. Duis ut faucibus lorem. Proin suscipit tristique felis sed accumsan. Sed blandit, sapien accumsan gravida vestibulum, dui mi porta libero, ac elementum nulla magna tristique justo. Phasellus semper ipsum vel</p>
</div>
</li>
<li class="slide4">
<div>
<h3>Slide Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate lacinia diam a eleifend. Ut tempor sapien vitae turpis placerat bibendum. Phasellus nec magna ut arcu vehicula gravida vel eu neque. Maecenas felis metus, venenatis ac tincidunt sit amet, iaculis quis nunc. Suspendisse fermentum neque id neque faucibus nec condimentum neque fermentum. Quisque in quam eget nisl iaculis pharetra id commodo erat. Vivamus vel nisi sit amet arcu tempus laoreet. Duis ut faucibus lorem. Proin suscipit tristique felis sed accumsan. Sed blandit, sapien accumsan gravida vestibulum, dui mi porta libero, ac elementum nulla magna tristique justo. Phasellus semper ipsum vel</p>
</div>
</li>
<li class="slide5">
<div>
<h3>Slide Five</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate lacinia diam a eleifend. Ut tempor sapien vitae turpis placerat bibendum. Phasellus nec magna ut arcu vehicula gravida vel eu neque. Maecenas felis metus, venenatis ac tincidunt sit amet, iaculis quis nunc. Suspendisse fermentum neque id neque faucibus nec condimentum neque fermentum. Quisque in quam eget nisl iaculis pharetra id commodo erat. Vivamus vel nisi sit amet arcu tempus laoreet. Duis ut faucibus lorem. Proin suscipit tristique felis sed accumsan. Sed blandit, sapien accumsan gravida vestibulum, dui mi porta libero, ac elementum nulla magna tristique justo. Phasellus semper ipsum vel</p>
</div>
</li>
</ul>
Now we move onto Part 2 the CSS.
And also we have a Part 3 on turning that CSS horizontal.