Панель с навигацией для подвала сайта на СSS3 | RUDEBOXВ данном уроке мы рассмотрим как можно стилизовать подвал, или как его еще называют, футер сайта. Если вы присматривались, то внизу сайта можно найти схожие ссылки, которые находятся в панели навигации, это делается с целью упростить навигацию на сайте, чтобы вы не возвращались в самое начало. Мы создадим фиксированную  панель в подвале сайта с отзывчивым интерфейсом, кроме этого добавим несколько социальных иконок. Кроме этого панель легко настроить под цветовой интерфейс сайта.

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

Шаг 1. HTML

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

По желанию можно добавить свое количество подпунктов и иконок для социальных сетей.

Панель с навигацией для подвала сайта на СSS3 | RUDEBOX

Шаг 2. CSS

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

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

Читайте также: