Создание стильного меню аккордеона на jQuery
Поиск

Создание стильного меню аккордеона на jQuery

Nikel, 01.05.2019

Мы уже недавно рассматривали простой аккордеон без использования скриптов, о том как его сделать вы можете посмотреть  урок здесь. А в этой статье будет рассказано как создать меню аккордеон на основе jQuery, с модным плоским дизайном, такой как показано на рисунке.

Cначала  мы добавим некоторые коды в раздел head. К ним относятся таблицы стилей и библиотека jQuery.

HTML код аккордеона

Разметка будет сделана на основе списка определений dl, внутри которого находятся пары  тегов dt и dd. dt (обозначающий термин),  будет играть роль заголовка меню, а dd (определение термина) будет содержать дочерние элементы (будь то текст или списки ссылок).

CSS стили меню

В первую очередь определим базовые стили для элемента body, такие как ширина, цвет, размер и гарнитура шрифта.

Затем давайте добавим несколько стилей к тегам dd и dt. Выберем кирпично-красный цвет для тега dt, чтобы стало понятно что это заголовок списка, который можно развернуть. А  тег dd оставим  простого цвета, чтобы дочерние пункты выделялись на фоне заголовков:

Убираем верхнюю и нижнюю границу меню-аккордеона используя псевдоклассы  :first-child (первый элемент dt) и :nth-last-child(2)(последний элемент dt, он будет второй по счету с конца).

Кроме этого, мы добавим класс hide. Позже мы будем использовать этот класс в нашем коде jQuery, чтобы скрыть и показать  теги dd.

Добавление jQuery

Код jQuery можно вставить внутри тега head либо внизу тега body, так мы даже увеличим быстродействие. Не забывайте заключить этот код в тег <script>.

Добавим анонимную функцию jQuery. Так как по умолчанию элементы dd скрыты, для них устанавливаем класс hide, который делает их невидимыми.  При событии-клике по заголовку меню dt следующий за ним элемент dd раскрывается, тогда как остальные, сестринские элементы dd сворачиваются. Обратите внимание, что методы slideDown и slideUp служат для плавного открытия и закрытия пунктов меню. В скобках указана продолжительность 300, это означает, что эти эффекты будут происходить в течение  3 миллисекунд.

Демонстрационный пример

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