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

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

Шаг 1. HTML

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

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

Создаем навигационное меню с помощью CSS3 | RUDEBOX

Шаг 2. CSS

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

Шаг 3. JS

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

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

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