Хорошая навигация на сайте является неотъемлемой его частью. Вы можете создать любое меню сайта, но кроме этого оно должно быть гармонично сочетаться с другими элементами на сайте, к этим критериям можно отнести и цветовую схему меню. Мы уделяем множество уроков данной тематике, ведь это один из главных элементов на странице ресурса. В данном уроке мы рассмотрим простое, анимированное меню для сайта с вертикальным расположением созданное с помощью исключительно css.
Основное преимущество данного меню в том, что оно достаточно легкое в размере, с ним легко работать. И так, давайте приступим.
Шаг 1. HTML
Нам необходимо создать контейнер, который будет содержать подписи меню и классы, для подчеркивания каждого пункта разным цветом.
<div class = "container" style = "">
<ul class = "nice-menu">
<li class = "orange"><a href = "">Главная</a></li>
<li class = "red"><a href = "">О нас</a></li>
<li class = "green"><a href = "">Контакты</a></li>
<li class = "blue"><a href = "">Профиль</a></li>
<li class = "bright"><a href = "">Портфолио</a></li>
<li class = "red"><a href = "">Материалы</a></li>
</ul>
</div>
<div class = "container" style = "">
<ul class = "nice-menu bounce">
<li class = "orange"><a href = "">Главная</a></li>
<li class = "red"><a href = "">О нас</a></li>
<li class = "green"><a href = "">Контакты</a></li>
<li class = "blue"><a href = "">Профиль</a></li>
<li class = "bright"><a href = "">Портфолио</a></li>
<li class = "red"><a href = "">Материалы</a></li>
</ul>
</div>
В примере мы используем два варианта меню, одно с простым затуханием полосок, а второе- с отскоком.
Шаг 2. CSS
Стили достаточно просты, для начала нам необходимо определить общие параметры, мы установим скорость анимации в миллисекундах, добавим стили, и зададим позиционирование на странице.
ul.nice-menu li {
-moz-animation-name: shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li {
-moz-animation-name: shrink-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu li:hover {
width: 200px;
padding-left: 20px;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li:hover {
-moz-animation-name: expand-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a {
width: 200px;
text-decoration: none;
font-size: 14px;
color: #FFF;
text-shadow: 0px 0px 3px #333;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
}
ul.nice-menu li.green {
background: rgb(107,186,112);
}
ul.nice-menu li.blue {
background: rgb(78,92,127);
}
ul.nice-menu li.orange {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.red {
background: rgb(178,59,30);
}
ul.nice-menu li.bright {
background: rgb(241,249,210);
}
Более детально стили можно рассмотреть в исходниках.