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

Кроме этого мы добавим небольшие иконки, которые скрасят общую картину выпадающего аккордеона. И так, давайте приступим.

Шаг 1. HTML

Для начала нам необходимо создать контейнер в котором будут размещаться классы, для главной мы добавим соответственно класс «home», для выпадающих подпунктов нам необходимо добавить div с классом «gallery-wrapper»:

Следует отметить, что мы не будем использовать никаких скриптов и сторонних библиотек, весь аккордеон функционирует благодаря правилам CSS3.

Аккордеон с выпадающим списком с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Для начала в стили мы добавим общий параметр сброса, мы не стали приводить его в примере, он находится в исходниках. Мы определяем общие параметры контейнера, устанавливаем цветовой оттенок для текста, создаем градиентную заливку для списка, следует заметить, что мы добавили несколько градиентов для кроссбраузерности. Установим время для разворота списка на 3ms.

При выборе подпункта активный элемент будет подсвечиваться синим градиентом.

Вот и все. Готово!

Автором является Max. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.