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

 

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

Шаг 1. HTML

Для начала рассмотрим разметку. Данный HTML-код содержит неупорядоченный список. Каждый элемент списка является ссылкой с анкором. В тег span заключено название элемента меню.

Как вы заметили, разметка достаточно простая, по этому детально на ней останавливаться не стоит. Перейдем к следующему шагу.

Шаг 2. CSS

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

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

В элементе span мы будем использовать шрифт «Kotta One» размером и весом в 20px и 700 соответственно. При этом зададим белый цвет шрифта для текста в позиции hover.

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

 Теперь повторим этот шаг по отношению ко всем элементам списка, применив понравившийся вам фоновый цвет.

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

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