Android меню для сайта с помощью jQuery и CSS3 | RUDEBOXМы рассматривали множество различных вариантов навигации для сайта, но никак не затрагивали футер сайта, и как можно организовать его в качестве дополнительного элемента навигации, который будет представлять собой выпадающее меню с социальными иконками. Основная идея была взята с популярной мобильной операционной системы — android. По умолчанию иконки в подвале сайта будут скрыты, но при нажатии на нижнюю панель будет происходить объемная трансформация с подальшим выводом контента.

Ключевой особенностью данной док-панели, пожалуй, является сама трансформация. Ее можно использовать не только как вывод социальных иконок, но и личной информации для посетителя. Давайте посмотрим как все это можно реализовать.

Шаг 1. HTML

Иконки панели находится внутри div с именем dock-wrapper. Элемент item будет содержать все иконки.

Элементы с классом ID arrow-up/down будут содержать стрелки для вызова и сворачивания панели.

Android меню для сайта с помощью jQuery и CSS3 RUDEBOX

Шаг 2. СSS

Для начала нам необходимо стилизовать док-панель и присвоить ей абсолютное позиционирование. Установим для dock-front и dock-top трансформацию и фон. Также добавим небольшую анимацию, когда пользователь наводит курсор на стрелку.

Теперь нам необходимо вывести иконки, они будут стилизованы и иметь абсолютное позиционирование на странице.

Шаг 3. JavaScript

Нам необходимо реализовать анимацию для этого мы добавим класс .dock-show к классу .dock, чтобы она заработала. Кроме этого мы будем по очереди выводить иконки.

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

Последним шагом будет добавление небольшой анимации при наведении на иконки.

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

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