Как создать навигацию сайта на CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

СКАЧАТЬ

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

Как создать навигацию сайта на css3

<!--[if lt IE 9]>

<![endif]-->

<nav>

<ul>

<li id="home"><a href="#home">Главная</a></li>

<li id="news"><a href="#news">Новости</a></li>

<li id="about"><a href="#about">Шаблоны</a></li>

<li id="services"><a href="#services">Релизы</a></li>

<li id="contact"><a href="#contact">Контакты</a></li>

</ul>

</nav>

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

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

.fancyNav{

/* для списка UL */

overflow: hidden;

display: inline-block;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);

-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);

-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);

}

.fancyNav li{

/* цвета и градиенты CSS3, поддерживаемые большинством браузеров */

background-color: #f0f0f0;

background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));

border-right: 1px solid rgba(9, 9, 9, 0.125);

/* добавляем 1px тени для сглаживания: */

box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

position:relative;

float: left;

list-style: none;

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

.fancyNav li:after{

/* создаем псевдо-элемент внутри каждого элемента LI */

content:'.';

text-indent:-9999px;

overflow:hidden;

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

z-index:1;

opacity:0;

/* градиенты! */

background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));

background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

/* создание рамок с помощью box-shadow. это полезно, так как никак не влияет на размер самого элемента. */

box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

/* плавный переход для свойства opacity */

-moz-transition:0.25s all;

-webkit-transition:0.25s all;

-o-transition:0.25s all;

transition:0.25s all;

}

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

/* для первого LI и li:after элемента отдельно */

.fancyNav li:first-child{

border-radius: 4px 0 0 4px;

}

.fancyNav li:first-child:after,

.fancyNav li.selected:first-child:after{

box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

border-radius:4px 0 0 4px;

}

.fancyNav li:last-child{

border-radius: 0 4px 4px 0;

}

/* для последнего LI и li:after элементов */

.fancyNav li:last-child:after,

.fancyNav li.selected:last-child:after{

box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

border-radius:0 4px 4px 0;

}

.fancyNav li:hover:after,

.fancyNav li.selected:after,

.fancyNav li:target:after{

/* это запустит CSS3 переходы */

opacity:1;

}

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

.fancyNav:hover li.selected:after,

.fancyNav:hover li:target:after{

/* прячет li при наведении на весь список UL */

opacity:0;

}

.fancyNav li.selected:hover:after,

.fancyNav li:target:hover:after{

opacity:1 !important;

}

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

/* стилизация ссылок */

.fancyNav li a{

color: #5d5d5d;

display: inline-block;

font: 20px/1 Lobster,Arial,sans-serif;

padding: 12px 35px 14px;

position: relative;

text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);

z-index:2;

text-decoration:none !important;

white-space:nowrap;

}

.fancyNav a.homeIcon{

background:url('../img/home.png') no-repeat center center;

display: block;

overflow: hidden;

padding-left: 12px;

padding-right: 12px;

text-indent: -9999px;

width: 16px;

}

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

На главную