Автор

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

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


 

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

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


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

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

Как высказался руководитель компании UMIHOST в своем блоге Антон Приходько – Все студии и фрилансеры, занимающиеся изготовлением сайтов, где-то эти сайты в итоге размещают. Редко клиент сам заботится о хостинге своего сайта, а тем более, занимается собственно размещением сайта — чаще всего сайт живет там, куда его «поселил» изготовитель.

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

  1. Как выбрать место размещения сайта таким образом, чтобы не опростоволоситься в глазах заказчика? Чем стабильнее будет работать сайт, тем больше доверия к изготовителю: и карма от этого улучшается, и доверие в итоге окупается.
  2. Как выбрать место для размещения сайта таким образом, чтобы сайт не только стабильно работал, но еще и приносил своему создателю выгоду?

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

Список разделенных блоков, которые воссоединяются при прокрутке, имитируя движение по оси Z с помощью преобразований CSS и jQuery.


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

Всем известен youtube, весьма популярный сервис для просмотра и размещения созданного пользователями видео со всего мира в интернете. Недавно был обновлен интерфейс данного сервиса, в котором появилось много чего нового и интересного. В данном уроке мы рассмотрим как создать идентичные кнопки как на youtube. Такой дизайн кнопок очень выразителен и отлично работает. Состояние по умолчанию не бросается в глаза посетителя, соревнуясь за его внимание с другими достойными элементами интерфейса. Данные кнопки выражают функционал, в отличие от ссылок..


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

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close