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

 

В данном меню мы будем использовать CSS3 и HTML5, по этому есть возможность исправить непонимание в браузере IE по этому следует скачать и добавить этот файл:

И вставить его между тегами head:

Рассмотрев код можно заметить что мы будем будем использовать три элемента HTML5: header, nav и footer, которые делят документ на три логические части. Обратим наше внимание на элемент nav, куда мы поместим список ul. С этого и будет состоять меню которое мы рассматриваем.

Далее мы начнем рассматривать стили CSS, к  нашему ненумерованному списку применим класс fancyNav, который мы будем использовать для лимитирования эффектов CSS стилей, в нашем меню мы будем использовать только одну картинку png, все остальные эффекты мы достигнем стилями при помощи теней и градиентов. Что касается поддержки браузерами, то меню работает в последних версиях Firefox, Chrome, Safari и Opera, и в то же время в IE старше 7ой версии. Тем не менее лучше всего меню отображается в Firefox 4, так как он поддерживает анимирующие псевдо-элементы :before и :after через свойство transition (в других браузерах такого пока нет).

Рассмотрим некоторый нюанс, по созданию наших градиентов. Браузеры Firefox, Chrome и Safari поддерживают все градиенты. Теперь создаем градиент для наведения курсора мыши, выглядит следующим образом:

Теперь создадим  псевдо-элементы :first-child и :last-child мы зададим отдельные стили для первого и последнего пунктов меню, которые будут иметь такой вид:

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

И напоследок стилизуем наши ссылки в меню следующим образом:

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

На главную