В данном уроке мы сделаем простое навигационное меню с анимационным эффектом при наведении курсора мыши.

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

При использовании псевдо-класса CSS hover выявляется неприятная проблема: при наведении курсора мыши в угол пункта меню анимация останавливается сразу же после начала, так как элемент при повороте "уходит" из зоны действия курсора.

Для решение проблемы воспользуемся функцией jQuery hover, которая будет добавлять и убирать класс CSS.

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);
    });
});

Добавлено: 01 Мая 2018 09:27:44 Добавил: Андрей Ковальчук Нравится 0

Добавить