JQuery animation Drop Down Menus

Hi dear readers, this is a fancy drop down menus with CSS and JQuery. the demo used jQuery animate function and CSS to put some stylish effects and used a background for navigation.
Support: Firefox, Chrome and Safari.

 

JQuery Code

$(function() {
$('#navigation > div').hover(
function () {
var $this = $(this);
//$this.find('.images').fadeIn();

$this.find('a.menu').removeClass('menu').addClass('hovered');

$this.find('.images').stop().animate({
'width'     :'230px',
'height'    :'390px',
'opacity'   :'1.0'
},400,'easeOutBack',function(){

$(this).parent().find('div').fadeIn('fast');
});
},
function () {
var $this = $(this);

$this.find('div').fadeOut(500);
//$this.find('.images').hide();
$this.find('a.hovered').removeClass('hovered').addClass('menu');

$this.find('.images').stop().animate({
'width'     :'100px',
'height'    :'0px',
'top'       :'0px',
'left'      :'0px',
'opacity'   :'0.9'
},600,'easeOutBack');
}
);
});

HTML

 

Leave a comment