Jquery CSS Animated Menu

October 8th, 2012 by aditia rahman / No Comments  

     

Few days ago I try to create a simple navigation menu with a css rotating animation, using css animation and features sure it possible to do this, but in this case I want the animation applied when mouse over event are triggered.

The problem using css hover menu is when mouse hover triggered, the element are starting to rotate even if the mouse hover on the corner of the element, and the animation suddenly stop cause the element already leave the mouse cursor.

So I try using a simple jquery hover function to apply this animation with adding and removing a css class, and here are some code.

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

You can see the different on the demo link, it only work on firefox, chrome and safari.

View Demo

        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment