7 351 Скрипты / Accordion

Flat accordion menu - вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

В меню также отображается количество дочерних элементов у родителя, если они есть.

HTML

Обычный список.

Добавляем класс active к пункту, который мы хотим выделить "подсветкой".

Класс has-sub указываем у тех пунктов, у которых есть дочерние элементы.

<div id='cssmenu'>
    <ul>
        <li class='active'><a href='/'><span>Главная</span></a></li>
        <li class='has-sub'><a href='#'><span>Каталог</span></a>
            <ul>
                <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='has-sub'><a href='#'><span>О компании</span></a>
            <ul>
                <li><a href='#'><span>Сотрудники</span></a></li>
                <li><a href='#'><span>Вакансии</span></a></li>
            </ul>
        </li>
        <li><a href='#'><span>Контакты</span></a></li>
    </ul>
</div>

CSS

JS

Для работы меню подключаем jQuery и подключаем файл со следующим скриптом:

В первой части определяется высчитывается количество дочерних элементов, далее добавляется класс odd или even для создания "фоновой зебры" и последняя часть - работает над скрытием и закрытием дочерних элементов.

Скачать 1584Загрузок 1,52 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи