Стильное вертикальное меню аккордеон для сайта

Здравствуйте уважаемые коллеги! В данной заметке я хочу продолжить тему вертикальное меню аккордеон.  Статья вертикально-выпадающее меню аккордеон для joomla вызвала много проблем у начинающих пользователей. Поэтому я решил продолжить данную тему и выложить еще одно стильное аккордеон меню для сайта.

Для эффекта плавного скольжения у нас задействованы библиотеки jQuery и jQuery UI.

Итак, html-код будет следующим:

<div class="akkordeon">
    <ul class="vmenu">
        <li class="home"><a href="#">Главная</a></li>
        <li class="about-us parent"><a href="#"><span>О нас</span></a>
            <ul class="dropdown">
                <li><a href="#"><span>Сотрудники</span></a></li>
                <li><a href="#"><span>Режим работы</span></a></li>
                <li><a href="#"><span>История компании</span></a></li>
            </ul>
        </li>
        <li class="gallery parent"><a href="#"><span>Галерея</span></a>
            <ul class="dropdown">
                <li><a href="#"><span>Фото</span></a></li>
                <li><a href="#"><span>Видео</span></a></li>
                <li><a href="#"><span>Продукция</span></a></li>
            </ul>
        </li>
        <li class="portfolio"><a href="#">Портфолио</a></li>
        <li class="contact"><a href="#">Контакты</a></li>
    </ul>
</div>

CSS-код:

* {
    margin: 0;
    padding: 0
}

html,
body {
    background: url(../images/bg.jpg) #383a3f;
    margin: 0;
    padding: 0;
}

.akkordeon {
    width: 200px;
    margin: 50px auto 0;
}

ul.vmenu {
    background-color: #454851;
    border: 1px solid #25272b;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.1);
    -o-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.1);
    -ms-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.1);
    list-style: none;
    font: 13px Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden
}

ul.vmenu li.home {
    background: url(../images/home-icon.png) 12px 12px no-repeat
}

ul.vmenu li.home:hover {
    background: url(../images/home-icon.png) 12px -21px no-repeat
}

ul.vmenu li.about-us {
    background: url(../images/about-us-icon.png) 12px 12px no-repeat
}

ul.vmenu li.about-us:hover {
    background: url(../images/about-us-icon.png) 12px -23px no-repeat
}

ul.vmenu li.gallery {
    background: url(../images/gallery-icon.png) 12px 13px no-repeat
}

ul.vmenu li.gallery:hover {
    background: url(../images/gallery-icon.png) 12px -20px no-repeat
}

ul.vmenu li.portfolio {
    background: url(../images/portfolio-icon.png) 12px 11px no-repeat
}

ul.vmenu li.portfolio:hover {
    background: url(../images/portfolio-icon.png) 12px -22px no-repeat
}

ul.vmenu li.contact {
    background: url(../images/contact-icon.png) 12px 11px no-repeat
}

ul.vmenu li.contact:hover {
    background: url(../images/contact-icon.png) 12px -22px no-repeat
}

ul.vmenu li a {
    background: url(../images/bg-li-a.png) repeat-x;
    -mozbox-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid #292b30;
    color: #d9ddea;
    display: block;
    text-decoration: none;
    padding: 10px 10px 10px 40px;
    height: 18px;
}

ul.vmenu li:first-child a {
    box-shadow: none
}

ul.vmenu li a:hover {
    background: url(../images/bg-li-a-hover.png) repeat-x
}

ul.vmenu li.parent a span {
    display: block;
    background: url(../images/arrow-down.png) right center no-repeat;
}

ul.vmenu li.parent a.selected span {
    background: url(../images/arrow-up.png) right center no-repeat
}

/******************************* Выпадающие пункты */
ul.vmenu li ul.dropdown {
    height: 0;
    overflow: hidden
}

ul.vmenu li ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.vmenu li ul li {
    background: url(../images/dropdown-menu-li.jpg) repeat-x;
}

ul.vmenu li ul li a {
    background: none;
    padding: 0;
    height: 38px
}

ul.vmenu li ul li a span {
    background: url(../images/menu-dropdown-figure.png) 18px 16px no-repeat !important;
    display: block;
    padding: 10px 10px 10px 40px;
}

ul.vmenu li ul li a:hover span {
    background: url(../images/menu-dropdown-figure.png) 18px -8px no-repeat !important;
}

ul.vmenu li ul li a:hover {
    background: url(../images/dropdown-menu-li-a-hover.jpg) repeat-x
}

В папке «js» у находится один единственный файлик — functions.js, в котором заданы некоторые параметры, используемым функциям. Библиотеки jQueri и jQuery UI подгружаются удаленно:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Данный скрипт очень прост в подключении. Достаточно взглянуть в код файлов исходников. Стили можете переопределить по своему усмотрению. В общем, пользуйтесь. До встречи!