521 Автор этой статьи попытался сделать оригинальное навигационное меню на CSS и jQuery с использованием вращающейся анимации.
Есть следующая проблема — при наведении мышкой на элемент меню, если отвести курсор мыши от элемента во время выполнении анимации, то она внезапно прекращается, что не очень удобно.
Поэтому был написан JS скрипт, который добавляет или снимает класс с элемента при наведении на него курсором мыши.
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<nav id="nojquery"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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
|
1 2 3 4 5 6 7 8 9 |
$(function() { $("#withjquery li a").hover(function() { var el = this; $(this).addClass('rotate'); setTimeout(function() { $(el).removeClass('rotate'); }, 2000); }); }); |
Также стоит отметить, что пример работает только в браузерах Firefox, Chrome и Safari.
P.S.: Недавно нашел относительно недорогую дисковую систему хранения данных Storwize 2076-224. Отлично подойдет для среднего бизнеса.
