Question

用jquery怎样做一个有弹动效果的下拉菜单？

Answer 1

/*样式*/
*{margin:0;padding:0;}
ul,li{list-style:none;}
ul{height:50px; width:1000px; margin:50px auto;}
ul li{width:25%; height:50px; float:left; text-align:center; position:relative;}
ul li a{display:block; line-height:50px; color:#f00;}
ul li dl{position:absolute; left:0; top:100%; width:100%; display:none; overflow:hidden;}
ul li dl dt{height:30px; width:100%; float:left;}
ul li dl dt a{line-height:30px !important; color:#000 !important;}

html

<ul>
	<li>
    	<a href="">导航1</a>
        <dl>
        	<dt><a href="">下拉1-1</a></dt>
            <dt><a href="">下拉1-2</a></dt>
            <dt><a href="">下拉1-3</a></dt>
            <dt><a href="">下拉1-4</a></dt>
        </dl>
    </li>
    <li>
    	<a href="">导航2</a>
        <dl>
        	<dt><a href="">下拉2-1</a></dt>
            <dt><a href="">下拉2-2</a></dt>
        </dl>
    </li>
    <li>
    	<a href="">导航3</a>
        <dl>
        	<dt><a href="">下拉3-1</a></dt>
            <dt><a href="">下拉3-2</a></dt>
            <dt><a href="">下拉3-3</a></dt>
        </dl>
    </li>
    <li>
    	<a href="">导航4</a>
        <dl>
        	<dt><a href="">下拉4-1</a></dt>
            <dt><a href="">下拉4-2</a></dt>
            <dt><a href="">下拉4-3</a></dt>
            <dt><a href="">下拉4-4</a></dt>
            <dt><a href="">下拉4-5</a></dt>
        </dl>
    </li>
</ul>

js,记得嵌入jquery库

$("li").mouseenter(function(){
	var dl = $(this).find("dl");
	var hei = $(this).find("dl").height();
	dl.show();
	dl.height(0);
	dl.animate({height:hei},"fast",function(){
		$(this).animate({height:hei/3},300,function(){
			$(this).animate({height:hei},300,function(){
				$(this).animate({height:hei/2},300,function(){
					$(this).animate({height:hei},300);
				});
			});	
		});
	});
});
$("li").mouseleave(function(){
	$(this).find("dl").hide();
});

粗糙的写了一个例子

追问

恩，是粗糙了点，我已经知道原理了，我自己完善。谢谢