Меню аккордеон с jQuery cookie
HTML
<script src="http://www.biofooddiervoeding.nl/2011/menu/js/jquery.cookie.js"></script>
<ul id="menu">
<li>
<a href="#">Пункт Меню - 1</a>
<ul>
<li><a href="http://dbmast.ru">Ссылка - 1</a></li>
<li><a href="#">Ссылка - 2</a>
<ul>
<li><a href="#">Ссылка - 3</a></li>
<li><a href="#">Ссылка - 4</a></li>
</ul>
</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>
<li>
<a href="#">Пункт Меню - 5</a>
<ul>
...
CSS
ul{
list-style: none;
padding: 0; margin: 0;
}
#menu {
max-width: 200px;
margin: 0px auto;
border: 1px solid #222;
box-shadow:0 0 10px #000;
font: normal 14px Helvetica, Arial, sans-serif;
}
#menu li {
position: relative;
}
#menu li a {
display: block;
padding: 10px 15px;
border-bottom: 1px solid #222;
text-decoration: none;
color:#C9C9C9;
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);
}
#menu li a:hover, #menu li a.active {color:#f2bd00;}
#menu li ul {
display: none;
counter-reset: items;
}
#menu li ul li a {
counter-increment: items;
padding: 6px 12px;
background: #ececec;
color:#514B92;
text-shadow: 1px 1px 3px #ccc;
border-bottom: 1px dotted #ccc;
}
#menu li ul li a:hover{
background: #ccc;
color:red;
padding-left: 18px;
}
#menu li ul li a:after{
content: "»";
float: left;
margin-right:4px;
}
#menu > 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;
margin: -.9em 0 0 0;
color: white;
text-indent: 0;
text-align: center;
text-shadow:0px 1px 0px rgba(0, 0, 0, .5);
font-weight: 500;
border-radius:.769em;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
}
JavaScript
$(document).ready(function () {
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#menu > li > a:eq('+checkCookie+')').next().show();
}
$('#menu > li > a').click(function(){
var navIndex = $('#menu > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#menu li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#menu li a').removeClass('active');
$(this).addClass('active');
});
});