Анимированное вертикальное меню для сайта Анимированное вертикальное меню для сайта

 

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

Более детально стили можно рассмотреть в исходниках.

Вот и все. Готово!


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!