Главная » Для web-мастера » Скрипты

Адаптивное анимированное меню на CSS и jQuery


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

HTML
Код
<nav id="withjquery">
  <ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">Портфолио</a></li>
  <li><a href="#">Услуги</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Контакт</a></li>
  </ul>
</nav>


CSS
Код
nav#nojquery li a:hover, .rotate {
  -moz-animation: animrotate 2s;  
  -webkit-animation: animrotate 2s;  
  background: #222;
}
@-moz-keyframes animrotate {
  100% {background: green;-moz-transform: perspective( 200px ) rotateY( 360deg );}
}

@-webkit-keyframes animrotate {
  100% {background: green;-webkit-transform: perspective( 200px ) rotateY( 360deg );}
}


jQuery
Код
$(function() {
  $("#withjquery li a").hover(function() {
  var el = this;
  $(this).addClass('rotate');
  setTimeout(function() {
  $(el).removeClass('rotate');
  }, 2000);
  });
});



Источник |  Категория: Скрипты | Добавил: AID | Дата: 15.01.2013
Скачать Адаптивное анимированное меню на CSS и jQuery с сервера
2719_demo_1614.zip Размер: 1.3 Kb (cкачиваний: 136)
Посмотреть демо Адаптивное анимированное меню на CSS и jQuery
Адаптивное анимированное меню на CSS и jQuery(посмотрели: 1977)

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Хостинг от uCoz