Меню "Аккордеон" CSS/jQuery

Компактное вертикальное меню в стиле "Аккордеон" для боковых колонок сайта, с помощью CSS3 и jQuery

by Andrey Dobrovoi

HTML

<h1><a href="http://dbmast.ru/" target="_blank">Dobrovoimaster</a></h1>
<div class="conteiner">
    <!-- Блок меню в стиле Аккордеон -->
  <div class="mini-menu">
   <ul>
	  <li>
		<a href="#">Пункт Меню - 1</a>
		<ul>
			<li><a href="http://dbmast.ru/" target="_blank">Ссылка - 1</a></li>
			<li><a href="#">Ссылка - 2</a></li>
			<li><a href="#">Ссылка - 3</a></li>
			<li><a href="#">Ссылка - 4</a></li>
			<li><a href="#">Ссылка - 5</a></li>
			<li><a href="#">Ссылка - 6</a></li>
		</ul>
	</li>
	  <li>
		<a href="#">Пункт Меню - 2</a>
		<ul>
			<li><a href="#">Ссылка - 1</a></li>
			<li><a href="#">Ссылка - 2</a></li>
			<li><a href="#">Ссылка - 3</a></li>
			<li><a href="#">Ссылка - 4</a></li>
			<li><a href="#">Ссылка - 5</a></li>
			<li><a href="#">Ссылка - 6</a></li>
			<li><a href="#">Ссылка - 7</a></li>
			<li><a href="#">Ссылка - 8</a></li>
		</ul>
	</li>
	  <li>
		<a href="#">Пункт Меню - 3</a>
		<ul>
			<li><a href="#">Ссылка - 1</a></li>
			<li><a href="#">Ссылка - 2</a></li>
			<li><a href="#">Ссылка - 3</a></li>
			<li><a href="#">Ссылка - 4</a></li>
			<li><a href="#">Ссылка - 5</a></li>
			<li><a href="#">Ссылка - 6</a></li>
			<li><a href="#">Ссылка - 7</a></li>
			<li><a href="#">Ссылка - 8</a></li>
			<li><a href="#">Ссылка - 9</a></li>
		</ul>
	</li>
	  <li>
		<a href="#">Пункт Меню - 4</a>
		<ul>
            <li><a href="#">Ссылка - 1</a></li>
			<li><a href="#">Ссылка - 2</a></li>
			<li><a href="#">Ссылка - 3</a></li>
			<li><a href="#">Ссылка - 4</a></li>
            <li><a href="#">Ссылка - 5</a></li>
		</ul>
	</li>
    </ul>
  </div>
    <!-- Конец Блока Аккордеон -->
</div>

CSS

html {
    overflow-y: scroll;
}
body {
    background: #474747;
}
h1{text-align: center;font: 3em Helvetica, Arial, Sans-Serif;}
h1 a {
    color: #999;
    text-decoration: none;
    text-shadow: 0px 3px 8px #2a2a2a;
}
h1 a:hover {
    color: #ccc;
    text-shadow: 0px 5px 8px #2a2a2a;
}
.conteiner{
    max-width: 960px;
    margin: 50px auto;
}

/* Блок меню Аккордеон */

.mini-menu{
    max-width: 200px;
    margin: 0px auto;
    font: normal 14px Helvetica, Arial, sans-serif;
}
ul {
    list-style: none;
    margin: 0;
    padding:0;
    text-align:left;
}
.mini-menu > ul {
    margin-bottom: px;
    border: 1px solid #222;
    box-shadow:0 0 10px #000;
}
.mini-menu > ul > li {
    position: relative;
}
.mini-menu > ul > li > a {
    display: block;	
    outline: 0;	
    padding: .7em 1em;	
    text-decoration: none;	
    color:#C9C9C9;	
    font-weight: normal;	
    text-shadow: 1px 1px 3px #111;	
    background: #333;	
    box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);	
    background-image:linear-gradient(#444, #333);	
    background-image:-ms-linear-gradient(#444, #333);
    border-bottom: 1px solid #222;
}
.mini-menu > ul > li > a:hover{
    color:#f2bd00;
}
.mini-menu > ul > li > ul {
    counter-reset: items;
    height: 0;
    overflow: hidden;
    background: #eee;
    color: #777;
    font-size: .75em;
    box-shadow:inset 0 0 50px #BBB;
}
.mini-menu > ul > li > ul > li{
    counter-increment: items;
    padding: .5em 1.3em;
    border-bottom: 1px dotted #C9C9C9;
}
.mini-menu > ul > li > ul > li:hover{
    background: #ccc;
}
.mini-menu > ul > li > ul > li > a{
    color:#514B92;
    text-decoration: none;
}

.mini-menu > ul > li > ul > li > a:after{
    content: "»";
    float: left;
    margin-right:4px;
}
.mini-menu > ul > li > ul:after {
    content: counter(items);
    font-size: 0.857em;
    display:inline-block;
    position: absolute;
    right: 10px;
    top: 15px;
    background: #333;
    line-height: 1em;
    padding: .7em .8em;
   ...

JavaScript

$(function() {
	
	$(".mini-menu > ul > li > a").click(function() {
		var ul = $(this).next(),
				clone = ul.clone().css({"height":"auto"}).appendTo(".mini-menu"),
				height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
		
		clone.remove();
		ul.animate({"height":height});
		return false;
	});

});