Многоуровневое аккордеон меню

16-апр-2017, 00:31
Ruslan
217
Отличное многоуровневое аккордеон меню, работающее на jquery, которое придает плавную анимацию при раскрытии категорий. Так же, есть возможность использовать акордеон без js, при этом, акордеон меню будет работать на чистом html5 и css3, но без плавной анимации.
Многоуровневое аккордеон меню кроссбраузерное, поддерживает браузеры - IE9+, GoogleChrome, Firefox, Opera, Safari. Но самая отличительная его черта, это иконки в виде папок, которые меняют свой внешний вид, в зависимости открыта категория или нет.

Многоуровневое акордеон меню, работающее на jquery, которое придает плавную анимацию при раскрытии категорий.

Создание структуры
Структура HTML довольно проста. Если элемент списка содержит подэлементы, тогда мы вставляем input[type = checkbox] и его метку. Кроме того, мы добавляем класс .has-children в элемент списка. Все стандартные элементы списка содержат только тег привязки.

Структура HTML акордеон меню, довольно проста. 
Добавление стилей
Используем умную и вполне стандартную технику для обнаружения клика и показа контента субэлемента при помощью CSS, подключив input checkbox, мы можем использовать проверенный псевдокласс и соседний селектор сиблинга (div + div), чтобы изменить режим отображения элемента <ul> с «none» на «block».
Прежде всего, мы должны убедиться, что элемент checkbox охватывает весь элемент списка, который содержит подэлементы. Иными словами, нам необходимо создать пользовательский checkbox. Итак, во-первых, Вам нужно убедиться, что когда Вы нажмете на label, checkbox также будет отмечен / снят. Это достигается использованием атрибутом for внутри label (label for="sub-group-1" см. рисунок выше). Таким образом вы можете просто скрыть элемент input и работать с label.

Добавление стилей css для многоуровневого акордеон меню
Заметьте, в структуре html, что input и label и неупорядоченный список (которые мы делаем видимыми при щелчке) являются братьями и сестрами. Далее настраиваем раскрытие элемента при нажатии на label с помощью псевдо-класса checked.

 
Скачать:
[ 39,94 Kb ] ( - 6 )

Демо шаблона
Оставить комментарий
Мы в социальных сетях: