Create a Vertical Accordion Menu using CSS3 Tutorial
In this tutorial we'll learn about to create a Accordion Menu using CSS3. There are many CSS3 accordion tutorials around on the web, in this version we'll be using the :target pseudo-class and will work on browsers that support the CSS3 properties.
1. We'll start off with the basic structure of HTML containing the head section which includes the page title, stylesheet link & body tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="ac-styles.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Accordian Menu Tutorial</title>
Wrapper & Menu
2. Next inside the body tags create a main wrapper div tag to contain & center all of the content. In the wrapper tags, create an unordered list with a class name and create each list item with its own id. By giving each list item it's own id, we'll be using the :target selector which will allow us to style and open the accordion.
You need to make each list id different (eg. one, two) for the target selector to work, this will make the sub menus visible.
4. Now for the css, first I've written out some basics for the body & wrapper. I've made the wrapper centered and made the width 250px, because the wrapper will be containing the menu the width will determine the size of your menu.
8. To complete the accordion menu, you finish the stylesheet with the code below. To make the sub-menu hide, you make the height 0 and an hidden overflow for the first style. The transition styles tell the accordion sub-menus to drop out when clicked on. Lastly I've made the height 98px because I have the same amount of sub links for each menu. If you plan to have different amount of sub-links for each menu, you'll need to add a different height for each sub-menu depending on how many links you have.