Горизонтальный раздвижной аккордеон для сайтаВ последнее время такие элементы как раздвижные аккордеоны на сайтах стали весьма популярные, скрывают лишнюю информацию, помогают оживить Ваш ресурс и привлекают взор посетителей. В этой уроке речь пойдет о горизонтальном аккордеоне с возможностью слайдера реализованного при помощи jQuery. Куски аккордеона раздвигаются при клике и показывает дополнительную информацию, например текст, а другие панели аккордеона начнут сжиматься. Следует отметить, что данный аккордеон является полностью адаптивным.

 

Так как на дворе наступила зима, мы немного украсили аккордеон, чтобы придать ему немного рождественского настроение, и дополнить новогодний мотив. И так, давайте приступим.

Шаг 1. HTML

Мы будем использовать SVG-графику, что существенно упростит и ускорит процесс загрузки страницы, у нас будет четыре основных блока, в которых будет содержаться контент с графикой и позиционированием на странице:

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

Горизонтальный раздвижной аккордеон для сайта

Шаг 2. CSS

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

Шаг 3.JS

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

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

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