
Простое навигационное меню с анимационным эффектом при наведении курсора мыши. Идея заключается в формировании пунктов меню в виде панелей, которые будут вращаться и менять цвет при наведении курсора мыши. При изменении размеров экрана структура меню будет перестаиваться с помощью медиа запросов.
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>
<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 );}
}
-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);
});
});
$("#withjquery li a").hover(function() {
var el = this;
$(this).addClass('rotate');
setTimeout(function() {
$(el).removeClass('rotate');
}, 2000);
});
});
Просмотров: 3758
|
Категория: Скрипты | Добавил: NA
Другие новости |
Поделиться ссылкой
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.