Jquery 드랍 다운메뉴
$(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');
}
);
});
<div class="total_images" id="navigation">
<div class="eachs" id="link1">
<a href="#" class="menu" style=" width:90px;">99Points</a>
<img src="bg.png" alt="" width="140" height="140" class="images"/>
<div>
<ul>
<li><a href="http://www.99points.info/category/php/">PHP</a></li>
<li><a href="http://www.99points.info/category/codeigniter/">CodeIgniter</a></li>
<li><a href="http://www.99points.info/category/web-development/jquery/">JQuery</a></li>
<li><a href="http://www.99points.info/category/web-development/ajax/">AJAX</a></li>
<li><a href="http://www.99points.info/category/facebook/">Facebook</a></li>
<li><a href="http://www.99points.info/tag/youtube/">YOUTUBE</a></li>
<li><a href="http://www.99points.info/category/web-development/css/">CSS</a></li>
<li><a href="http://www.99points.info/category/mysql/">MYSQL</a></li>
<li><a href="http://www.99points.info/category/web-development/">Tutorials</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link4">
<a href="#" class="menu" style=" width:90px;">JQuery</a>
<img src="bg.png" alt="" width="140" height="140" class="images"/>
<div>
<ul>
<li><a href="http://www.99points.info/category/php/">PHP</a></li>
<li><a href="http://www.99points.info/category/codeigniter/">CodeIgniter</a></li>
<li><a href="http://www.99points.info/category/web-development/jquery/">JQuery</a></li>
<li><a href="http://www.99points.info/category/web-development/ajax/">AJAX</a></li>
<li><a href="http://www.99points.info/category/facebook/">Facebook</a></li>
<li><a href="http://www.99points.info/tag/youtube/">YOUTUBE</a></li>
<li><a href="http://www.99points.info/category/web-development/css/">CSS</a></li>
<li><a href="http://www.99points.info/category/mysql/">MYSQL</a></li>
<li><a href="http://www.99points.info/category/web-development/">Tutorials</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link2">
<a href="#" class="menu" style=" width:100px;">FaceBook</a>
<img src="bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="http://www.99points.info/category/php/">PHP</a></li>
<li><a href="http://www.99points.info/category/codeigniter/">CodeIgniter</a></li>
<li><a href="http://www.99points.info/category/web-development/jquery/">JQuery</a></li>
<li><a href="http://www.99points.info/category/web-development/ajax/">AJAX</a></li>
<li><a href="http://www.99points.info/category/facebook/">Facebook</a></li>
<li><a href="http://www.99points.info/tag/youtube/">YOUTUBE</a></li>
<li><a href="http://www.99points.info/category/web-development/css/">CSS</a></li>
<li><a href="http://www.99points.info/category/mysql/">MYSQL</a></li>
<li><a href="http://www.99points.info/category/web-development/">Tutorials</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link3">
<a href="#" class="menu" style=" width:72px;">PHP</a>
<img src="bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="http://www.99points.info/category/php/">PHP</a></li>
<li><a href="http://www.99points.info/category/codeigniter/">CodeIgniter</a></li>
<li><a href="http://www.99points.info/category/web-development/jquery/">JQuery</a></li>
<li><a href="http://www.99points.info/category/web-development/ajax/">AJAX</a></li>
<li><a href="http://www.99points.info/category/facebook/">Facebook</a></li>
<li><a href="http://www.99points.info/tag/youtube/">YOUTUBE</a></li>
<li><a href="http://www.99points.info/category/web-development/css/">CSS</a></li>
<li><a href="http://www.99points.info/category/mysql/">MYSQL</a></li>
<li><a href="http://www.99points.info/category/web-development/">Tutorials</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link5">
<a href="#" class="menu" style=" width:84px;">AJAX</a>
<img src="bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="http://www.99points.info/category/php/">PHP</a></li>
<li><a href="http://www.99points.info/category/codeigniter/">CodeIgniter</a></li>
<li><a href="http://www.99points.info/category/web-development/jquery/">JQuery</a></li>
<li><a href="http://www.99points.info/category/web-development/ajax/">AJAX</a></li>
<li><a href="http://www.99points.info/category/facebook/">Facebook</a></li>
<li><a href="http://www.99points.info/tag/youtube/">YOUTUBE</a></li>
<li><a href="http://www.99points.info/category/web-development/css/">CSS</a></li>
<li><a href="http://www.99points.info/category/mysql/">MYSQL</a></li>
<li><a href="http://www.99points.info/category/web-development/">Tutorials</a></li>
</ul>
</div>
</div>
<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
</div>