Меню навигации достаточно простой элемент дизайна. Создаем неупорядоченный список, задаем его стиль небольшой анимации и формируем внешний вид. В данном уроке, как вы уже догадались, мы рассмотрим как создать достаточно простую, но в тоже время весьма интересную навигацию со скользящими элементами с помощью трансформаций 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 и представлен исключительно в ознакомительных целях.
