프로그래밍/HTML+CSS+JavaScript

Jquery 드랍 다운메뉴

긴자손-1 2010. 9. 29. 15:26
반응형

$(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>



반응형