Меню аккордеон компактный Вариант №2

Списки ссылок аккордеона раскрываются по клику, предыдущие списки закрываются, предусмотрена возможность закрытия панелей по повторному клику

HTML

<div class="mini-menu">
    <ul>
        <li>
            <a href="http://dbmast.ru">Главная</a>
        </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>
                <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>
       ...

CSS

/*
 * Вертикальное меню в стиле аккордеон
 * раскрывается и закрывается по клику
 * предыдущая панель при этом закрывается
 *
 * Copyright (c) 2014 DBmast.ru (shurawi) 
 *
 */
/* Блок меню Аккордеон */
.mini-menu{
    max-width: 200px;
    margin: 0px auto;
    font: normal 14px Helvetica, Arial, sans-serif;
}
.mini-menu ul {
    list-style: none;
    margin: 0;
    padding:0;
}
.mini-menu > ul {
    margin-bottom: 0px;
    border: 1px solid #222;
    -webkit-box-shadow:0 0 10px #000;
    -moz-box-shadow:0 0 10px #000;
    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;
    background-image:-webkit-linear-gradient(#444, #333);
    background-image:-moz-linear-gradient(#444, #333);
    background-image:-ms-linear-gradient(#444, #333);
    background-image:linear-gradient(#444, #333);
    -webkit-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    -moz-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    border-bottom: 1px solid #222;
}
.mini-menu > ul > li > a:hover, .mini-menu > ul > li > a.active{
    color:#f2bd00;
}
.mini-menu > ul > li > ul {
    display: none;
    overflow: hidden;
    background: #eee;
    color: #777;
    font-size: .8em;
    -webkit-box-shadow:inset 0 0 50px #bbb;
    -moz-box-shadow:inset 0 0 50px #bbb;
    box-shadow:inset 0 0 50px #bbb;
}

.mini-menu > ul > li > ul > li > a{
    color:#514b92;
    display: block;
    text-decoration: none;
    padding: .7em 1em;
    border-bottom: 1px dotted #bababa;
}
.mini-menu > ul > li > ul > li > a:hover, .mini-menu > ul > li > ul > li > a.active {
    background: #d8d8d8;
    color: red;
    padding-left: 1.3em;
}
.mini-menu > ul > li > ul > li > a:after{
    content: "»";
    float: left;
   ...

JavaScript

$(document).ready(function () {
    $('.mini-menu > ul > li > a').click(function(){
      $('.mini-menu li ul').slideUp();
       if ($(this).next().is(":visible")){
           $(this).next().slideUp();
       } else {
       $(this).next().slideToggle();
       }
       $('.mini-menu > ul > li > a').removeClass('active');
       $(this).addClass('active');
    });
    $('.mini-menu > ul > li > ul > li > a').click(function(){
       $('.mini-menu > ul > li > ul > li > a').removeClass('active');
       $(this).addClass('active');
    });
});