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

 

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

Меню написано полностью на css, что позволит упросить загрузку и внедрение в структуру сайта, не стоит забывать, что скрипты java и картинки замедляют загрузку. И так, давайте приступим.

Шаг 1. HTML

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

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

Радужное меню для сайта с помощью CSS3

Шаг 2. CSS

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

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

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