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

Адаптивное анимированное меню на 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);
  });
});
  Просмотров: 3370 | Категория: Скрипты | Добавил: NA

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

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

Ссылка:
BB-code:
HTML:
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.