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

 

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

Шаг 1. HTML

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

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

Анимированное боковое меню для сайта на CSS3

Шаг 2. CSS

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

Теперь нам необходимо указать цветовую гамму, для каждого отдельного случая навигации:

В ходе простых манипуляций мы получаем достаточно привлекательное меню, которое явно понравится Вашим посетителям.

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

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