Навигационное меню с помощью CSS3

CSS3 06.06.2013

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

ДЕМО

ИСХОДНИКИ

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

Шаг 1. HTML

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

 <div class="navbar">
 <ul>
 <li><a href="#">О нас<div class="hover">О нас</div></a></li>
 <li><a href="#">Продукция<div class="hover">Продукция</div></a></li>
 <li><a href="#">Новости<div class="hover">Новости</div></a></li>
 <li><a href="#">Контакты<div class="hover">Контакты</div></a></li>
 </ul>
 </div>

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

Шаг 2. CSS

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

.navbar {
 width: 500px;
 height: 50px;
 background: #3a3a3a;
 /* Старые браузеры */

background: -moz-linear-gradient(top, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a3a3a), color-stop(50%, #3a3a3a), color-stop(51%, #2b2b2b), color-stop(100%, #2b2b2b));
 /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* Opera 11.10+ */

background: -ms-linear-gradient(top, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* IE10+ */

background: linear-gradient(to bottom, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* W3C */

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3a3a3a', endColorstr='#2b2b2b', GradientType=0);
 /* IE6-9 */

margin: 20px auto 40px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
 border-top: 1px solid #363636;
 border-left: 1px solid #363636;
 border-bottom: 1px solid #000000;
 border-right: 1px solid #000000;
}
.navbar ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
.navbar ul li {
 display: inline;
 float: left;
 width: 125px;
 height: 50px;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 color: #999999;
 line-height: 50px;
 border-right: 1px solid #363636;
 border-left: 1px solid #000000;
 overflow: hidden;
 margin: 0;
 padding: 0;
}
.navbar ul li a {
 width: 125px;
 height: 100px;
 display: inline-block;
}
.navbar ul li:first-child {
 border-left: none;
 -webkit-border-radius: 4px 0 0 4px;
 -moz-border-radius: 4px 0 0 4px;
 border-radius: 4px 0 0 4px;
}
.navbar ul li:last-child {
 border-right: none;
 -webkit-border-radius: 0 4px 4px 0;
 -moz-border-radius: 0 4px 4px 0;
 border-radius: 0 4px 4px 0;
}
.navbar .hover {
 background: #7DCBE0;
 color: #333333;
 display: block;
}
.navbar.small {
 height: 33.333333333333336px;
}
.navbar.small ul li {
 height: 33.333333333333336px;
 line-height: 33.333333333333336px;
}
.navbar.toolbar {
 width: 180px;
 height: 33.333333333333336px;
}
.navbar.toolbar ul li {
 height: 33.333333333333336px;
 line-height: 33.333333333333336px;
}
a {
 color: #999999;
 text-decoration: none;
}
a:hover {
 color: #999999;
}

Шаг 3. JS

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

$(document).ready(function() {
 $('.navbar li a').hover(
 function(e) {
 $(this).stop().animate({ marginTop: -50}, 100);
 },
 function(e) {
 $(this).stop().animate({ marginTop: 0}, 100);
 }
 );
});

Материал взят из зарубежного источника - codepen.io/szpakoli/pen/hbHnF и представлен исключительно в ознакомительных целях.