Автор

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

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


 

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

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

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


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

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

Пользователи, очевидно, не любят чувствовать себя потерянными, когда они перемещаются по сайту. Именно поэтому мы представили UX-шаблоны, чтобы показать, как они попали на конкретную страницу (хлебные крошки) и что будет дальше (индикаторы с несколькими шагами).


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

Что такое параллакс уже наверное известно всем и нет смысла повторяться в каждой публикации! Ковыряясь в инете нашел этот вариант (там был только HTML, а все остальное: картинки, стили и скрипты были на сайте разработчика). Объединив всё вместе, я сделал архив для скачивания и хочу представить очередной, в моем блоге, вариант этого плагина ImageScroll на jQuery.


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

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


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

Подсказки являются неотъемлемой частью сайта, который содержит множество текстовой информации, по этому в данном уроке речь пойдет о создании подсказок с использованием плагина TyniTips, суть состоит в том, когда при наведении курсора мыши на выделенное слово или объект плавно всплывает подсказка с необходимым текстом, изображением или другим медиафайлом для предоставления дополнительной информации посетителю, плагин достаточно легок в использовании и не составит особого труда при внедрении в верстку сайта, и так, давайте же посмотрим что у нас с этого получилось..


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close