Home > Tips

An Accordion-style CSS3 Vertical Menu Free Download

 

 

In the days before the CSS3 appeared, if we want to create an accordion-style vertical menu, we have to use js script. However, with the development of CSS3, we can create this kind of vertical menu with pure CSS3.

Through this article, I will show you an accordion-style CSS3 vertical menu. You can free download the demo and then edit the demo for your own use. Whats more, I will also show you the HTML and CSS structure of the accordion-style CSS3 vertical menu, I hope it will help you understand how to create an exceptional accordion-style CSS3 vertical menu.

Below is the Demo of the accordion-style CSS3 vertical menu

                                           [View the demo]                 [Download the demo] 



 The HTML Structure of the CSS3 Vertical Menu


<ul class='menu'>
<li class='item1' id='one'><a href='#one'>Friends </a>
<ul>
<li class='subitem1'><a href='#'>Cute Kittens </a></li>
<li class='subitem2'><a href='#'>Strange Stuff </a></li>
<li class='subitem3'><a href='#'>Automatic Fails </a></li>
</ul>
</li>
<li class='item2' id='two'><a href='#two'>Videos </a>
<ul>
<li class='subitem1'><a href='#'>Cute Kittens </a></li>
<li class='subitem2'><a href='#'>Strange Stuff </a></li>
<li class='subitem3'><a href='#'>Automatic Fails </a></li>
<li class='subitem2'><a href='#'>Strange Stuff </a></li>
<li class='subitem1'><a href='#'>Cute Kittens </a></li>
<li class='subitem2'><a href='#'>Strange Stuff </a></li>
</ul>
</li>
<li class='item3' id='three'><a href='#three'>Galleries</a>
<ul>
<li class='subitem3'><a href='#'>Automatic Fails</a></li>
</ul>
</li>
<li class='item5' id='five'><a href='#five'>Robots</a>
<ul>
<li class='subitem1'><a href='#'>Cute Kittens</a></li>
<li class='subitem2'><a href='#'>Strange Stuff</a></li>
<li class='subitem3'><a href='#'>Automatic Fails </a></li>
</ul>
</li>
</ul>


 

 CSS Structure of the CSS3 Vertical Menu

body {
background-color: #666;
}
.demo {
width: 200px;
height: 400px;
margin: 40px auto 0;
}
.menu > li {
line-height: 50px;
border-bottom: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888;
}
.menu > li:first-child {
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888,0 1px 0 #888 inset;
}
.menu a {
position: relative;
outline: 0;
display: block;
text-align: left;
color: #e5e5e5;
font-size: 18px;
text-shadow: 0 1px 1px #171717;
padding: 0 40px;
}
.menu a:hover {
text-decoration: none;
}
.menu > li > a:before,
.menu > li > a:after {
font-family: 'LigatureSymbols';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-font-feature-settings: 'liga' 1, 'dlig' 1;
-moz-font-feature-settings: 'liga=1, dlig=1';
-ms-font-feature-settings: 'liga' 1, 'dlig' 1;
font-feature-settings: 'liga' 1, 'dlig' 1;
font-size: 26px;
}
.menu > li > a:before {
position: absolute;
left: 10px;
color: #e5e5e5;
text-shadow: inherit -1px 0 #fff,0 -2px 0 #1a1a1a,0 1px 2px #1a1a1a;
}
.menu > li > a:after {
position: absolute;
right: 10px;
color: #292929;
text-shadow: -1px 0 0 #050505,1px 0 0 #868686;
}
.menu > li:nth-child(1) > a:before{
content:'friend';
}
.menu > li:nth-child(2) > a:before{
content:'video';
}
.menu > li:nth-child(3) > a:before{
content:'paint';
}
.menu > li:nth-child(4) > a:before{
content:'android';
}
.menu > li > a:after{
content:'plus';
}
.menu ul {
line-height: 30px;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s linear;
-moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}
.menu ul a {
color: #000;
text-shadow: 0 1px 1px #848484;
font-size: 12px;
}
.menu ul a:hover {
color: #ccc;
text-shadow: 0 1px 0 #252525;
}
.menu li:target > a:after {
content: 'minus';
}
.menu li:target ul {
max-height: 200px;
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888 inset;
}
@font-face {
font-family: 'LigatureSymbols';
src: url('font/LigatureSymbols-2.05.eot');
src: url('font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
url('font/LigatureSymbols-2.05.woff') format('woff'),
url('font/LigatureSymbols-2.05.ttf') format('truetype'),
url('font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
font-weight: normal;
font-style: normal;
}



 Contact Us for Help 

It is our goal and duty to give our users the best products, the best services and the best web design resources. However, we are human so we will surely make some mistakes. If you have problem downloading or editing the CSS3 vertical menu, please feel free to contact our technical support team: support@slicemaker.com.

We really appreciate your kind suggestions and we really want to hear from you.



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0