5 Вариантов одного меню аккордеон

30.01.2018

Просмотрели: 15 546

Однажды я выложил развернутый урок по созданию компактного меню в стиле аккордеон, раскрывающееся по клику, со встроенным счётчиком подпунктов. Меню получилось довольно симпатичным и функциональным. Внешний вид сформирован исключительно на CSS3, градиентная заливка, внешняя тень блока и т.д. Работа меню построена на библиотеке jQuery, исполняющий плагин получился очень лёгким и простым в настройках, так что меню привлекло внимание пользователей. Но тут же стали появляться вопросы типа: как сделать меню раскрывающееся по наведению, как прикрутить к нему обработчик cookie и т.п.
Вопросы такого плана задаются и к другим записям, посвященным созданию меню, поэтому я решил сделать 5 разных вариантов меню «аккордеон», в какой-то мере отвечающие запросам пользователей.

Повторяться не буду, полный расклад и описание отдельных параметров опущу, так как основы не отличаются от описанных в уроке. Функциональные различия (способы открытия и закрытия) в исполняемом javascript, они настолько не существенны, что думаю разобраться будет не трудно.
Смотрите живой пример, исходники js и css, выбирайте понравившийся вариант и творите, творите, творите…

1. Меню со встроенным счётчиком

Вариант меню аккордеон со встроенным счётчиком ссылок, раскрывается и закрывается по клику. Счетчик ссылок скрытых блоков отображается на основных пунктах, обрабатывается и выводится с помощью свойств counter-increment, counter-reset и content.
При раскрытии подпунктов, предыдущие раскрытые блоки остаются открытыми, закрываются по повторному клику:

2. Меню раскрывается по клику предыдущая панель при этом закрывается

Вариант «аккордеона» раскрывающегося по клику, при этом предыдущая панель, если она была раскрыта закрывается, повторный клик по основному пункту заблокирован. В данном случае счётчик ссылок отсутствует, заменил его активным переключателем, сигнализирующим о раскрытии и закрытии панелей:

3. Меню раскрывается и закрывается по клику

Вариант меню «аккордеон» с более расширенным функционалом, структура осталась та же, добавил возможность закрытия панелей по повторному клику, так же при раскрытии последующих панелей предыдущие закрываются автоматом, как и в других вариантах активные пункты выделяются и задействован активный переключатель на основных пунктах содержащих ссылки:

4. Меню «аккордеон» раскрывается при наведении

Очень много вопросов, как сделать меню раскрывающееся при наведении. Всё довольно просто, достаточно изменить функцию .click() на .hover() и ряд параметров в исполняемом js. При наведении курсора на основные пункты меню панели раскрываются, при переходе на другой пункт, предыдущая панель автоматом закрывается:

5. Меню аккордеон с jQuery Cookie

Вертикальное меню в стиле аккордеон раскрывается и закрывается по клику предыдущие панели при этом закрываются автоматом. С помощью jQuery Cookie при переходе на другую страницу, активные пункты и раскрытые панели сохраняют свое состояние. Для работы с куками используем специальный jQuery плагин, который необходимо подключить к странице вашего сайта, точно так же как и саму библиотеку jQuery. Если библиотеку вы можете подключить с Google, то плагин jQuery Cookie необходимо скачать, забросить в папку где у вас находятся js и уже затем подключить к странице, например вот так:

Всё, теперь куки будут записываться на стороне клиента, состояние открытых панелей и активных пунктов сохранятся при переходе.
В последнем варианте изменил внешний вид меню, выполнил его в светлых тонах, для примера гибкости настроек формирования с помощью css, используя исходники в виде шаблона, экспериментируя с параметрами, вам не составит большого труда добиться любых результатов.

Ну и последним аккордом в этой статье, как всегда будет ссылка на архив с исходниками, которые я бережно упаковал и выложил в облако на Яндекс.Диск, откуда все кому оно надо, можете их и забрать:

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: