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

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

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

При использовании псевдо-класса 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);
    });
});

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/N5_GDhpPzbk/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Адаптивное анимированное меню на CSS и jQuery | | 2013-01-16 22:42:21 | | Статьи Web-мастеру | | В данном уроке мы сделаем простое навигационное меню с анимационным эффектом при наведении курсора мыши.Идея заключается в формировании пунктов меню в виде панелей, которые будут вращаться и менять | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: