CSS3 Accordion

In this tutorial we will learn how to create an accordion menu using CSS3. As we will create it with CSS3 this will only work on browsers and devices that support the :target pseudo-class selector.

HTML Markup

<ul class="accordion">
	<li id="one"><a href="#one">One</a></li>
	<li id="two"><a href="#two">Two</a></li>
	<li id="three"><a href="#three">Three</a></li>
	<li id="four"><a href="#four">Four</a></li>
</ul>

Basic Styles

.accordion,
.accordion ul,
.accordion li,
.accordion a{ margin: 0; padding: 0; border: none; outline: none;}
 
.accordion li { list-style: none;}
 
.accordion li > a {
	display: block;
	position: relative;
	min-width: 110px;
	padding: 0 10px 0 20px;
	height: 32px;
 
	color: #fdfdfd;
	font: bold 12px/32px Arial, sans-serif;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);
 
	background: #6c6e74;
	background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
	background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
 
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

Sub Menu Links

<ul>
	<li id="one">
	<a href="#one">Title One</a>
<ul class="sub-menu">
	<li><a href="#one">Lorem ipsum dolor sit amet elit.</a></li>
	<li><a href="#one">Maecenas porttitor congue massa.</a></li>
	<li><a href="#one">Fusce posuere, magna sed pulvinar ultricies</a></li>
</ul>
</li>
</ul>

CSS Styles for sub items

.sub-menu li a {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: #e5e5e5;
	border-bottom: 1px solid #c9c9c9;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

Hover and Active states

.accordion > li:hover > a,
.accordion > li:target > a {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(255,255,255, .2);
 
	/*background: url(../img/active.png) repeat-x;*/
	background: #cc8e51;
	background: -moz-linear-gradient(top,  #cc8e51 0%, #b6712e 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc8e51), color-stop(100%,#b6712e));
	background: -webkit-linear-gradient(top,  #cc8e51 0%,#b6712e 100%);
	background: -o-linear-gradient(top,  #cc8e51 0%,#b6712e 100%);
	background: -ms-linear-gradient(top,  #cc8e51 0%,#b6712e 100%);
	background: linear-gradient(top,  #cc8e51 0%,#b6712e 100%);	
}

Show and hide the sub menu

.accordion li > .sub-menu {
	height: 0;
	overflow: hidden;
	-webkit-transition: height .2s ease-in-out;
	-moz-transition: height .2s ease-in-out;
	-o-transition: height .2s ease-in-out;
	-ms-transition: height .2s ease-in-out;
	transition: height .2s ease-in-out;
}
.accordion li:target > .sub-menu { height: 98px;}

We have finished this CSS3 Accordion Menu.

Working example: Demo | Download

Leave a Reply

Your email address will not be published. Required fields are marked *