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

 

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

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

Шаг 1. HTML

У нас будет четыре колонки, в каждом из которого будет содержаться информация, кроме этого мы добавляем форму поиска для удобности пользователя:

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

Анимированный подвал сайта с адаптацией на CSS3

Шаг 2. CSS

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

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

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

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