本文實例講述了jQuery實現帶動畫效果的二級下拉導航方法。分享給大家供大家參考。具體實現方法如下：
復制代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery二級下滑導菜單</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.effects.core.min.js"></script>
<style type="text/css">
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0; padding:10px;}
.nav_list{ list-style:none; margin:0; padding:0;}
.nav_list li{ float:left; text-align:center; margin-right:10px; position:relative;}
.nav_list li a{ width:80px; text-align:center; padding:4px 0; text-decoration:none;color:#ccc; background:#996666; display:block; float:left;}
.nav_list li a.current{ width:80px; text-align:center; padding:4px 0; text-decoration:none;color:#fff; background:#f00; display:block; float:left;}
.nav_list li div.second{ color:#999999; height:0px; overflow:hidden; position:absolute; left:0; top:22px; width:80px;}
.nav_list li div.second a{ background:#666666; color:#fff; border:none; width:80px; border-top:1px solid
#FFFFFF; padding:5px 0;}
</style>
<script type="text/javascript">
$(function(){
Menu(".nav_list");
});
function Menu(ul_class_name){
Second(".nav_list");
var li_name = ul_class_name+" "+"li";
$("div.second").css("opacity","0.1");
$(li_name).hover(
function(){
var a_height = $(this).children("div.second a:first").css("height");
var a_count = $(this).children("div.second").children("a").length;
var slide_hieght = (parseInt(a_height)+11)*a_count;
$(this).children("div.second").stop().animate({height:slide_hieght+"px",opacity:"0.9"},600);
$(this).children("a:not(.current)").stop().animate({backgroundColor:"#f00",color:"#fff"},800);
},function(){
$(this).children("div.second").stop().animate({height:"0px",opacity:"0.1"},600);
$(this).children("a:not(.current)").stop().animate({backgroundColor:"#996666",color:"#ccc"},800);
});
}
function Second(ul_class_name){
var second_menu = ul_class_name+" "+"li"+" "+"div.second"+" "+">"+" "+"a";
$(second_menu).hover(
function(){
$(this).stop().animate({backgroundColor:"#000",opacity:"1"},400);
},function(){
$(this).stop().animate({backgroundColor:"#666",opacity:"0.9"},400);
});
}
</script>
</head>
<body>
<ul class="nav_list">
<li>
<a href="#" class="current">Test_1</a>
<div class="second">
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
</div>
<li>
<li>
<a href="#">Test_2</a>
<div class="second">
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
</div>
<li>
<li>
<a href="#">Test_3</a>
<div class="second">
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
</div>
<li>
<li>
<a href="#">Test_4</a>
<div class="second">
<a href="#">menu_4</a>
<a href="#">menu_4</a>
<a href="#">menu_4</a>
</div>
<li>
<li>
<a href="#">Test_5</a>
<div class="second">
<a href="#">menu_5</a>
<a href="#">menu_5</a>
<a href="#">menu_5</a>
</div>
<li>
</ul>
<div style="width:800px; clear:both; padding:10px;">
<p>這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery二級下滑導菜單</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.effects.core.min.js"></script>
<style type="text/css">
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0; padding:10px;}
.nav_list{ list-style:none; margin:0; padding:0;}
.nav_list li{ float:left; text-align:center; margin-right:10px; position:relative;}
.nav_list li a{ width:80px; text-align:center; padding:4px 0; text-decoration:none;color:#ccc; background:#996666; display:block; float:left;}
.nav_list li a.current{ width:80px; text-align:center; padding:4px 0; text-decoration:none;color:#fff; background:#f00; display:block; float:left;}
.nav_list li div.second{ color:#999999; height:0px; overflow:hidden; position:absolute; left:0; top:22px; width:80px;}
.nav_list li div.second a{ background:#666666; color:#fff; border:none; width:80px; border-top:1px solid
#FFFFFF; padding:5px 0;}
</style>
<script type="text/javascript">
$(function(){
Menu(".nav_list");
});
function Menu(ul_class_name){
Second(".nav_list");
var li_name = ul_class_name+" "+"li";
$("div.second").css("opacity","0.1");
$(li_name).hover(
function(){
var a_height = $(this).children("div.second a:first").css("height");
var a_count = $(this).children("div.second").children("a").length;
var slide_hieght = (parseInt(a_height)+11)*a_count;
$(this).children("div.second").stop().animate({height:slide_hieght+"px",opacity:"0.9"},600);
$(this).children("a:not(.current)").stop().animate({backgroundColor:"#f00",color:"#fff"},800);
},function(){
$(this).children("div.second").stop().animate({height:"0px",opacity:"0.1"},600);
$(this).children("a:not(.current)").stop().animate({backgroundColor:"#996666",color:"#ccc"},800);
});
}
function Second(ul_class_name){
var second_menu = ul_class_name+" "+"li"+" "+"div.second"+" "+">"+" "+"a";
$(second_menu).hover(
function(){
$(this).stop().animate({backgroundColor:"#000",opacity:"1"},400);
},function(){
$(this).stop().animate({backgroundColor:"#666",opacity:"0.9"},400);
});
}
</script>
</head>
<body>
<ul class="nav_list">
<li>
<a href="#" class="current">Test_1</a>
<div class="second">
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
</div>
<li>
<li>
<a href="#">Test_2</a>
<div class="second">
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
<a href="#">menu_1</a>
</div>
<li>
<li>
<a href="#">Test_3</a>
<div class="second">
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
<a href="#">menu_3</a>
</div>
<li>
<li>
<a href="#">Test_4</a>
<div class="second">
<a href="#">menu_4</a>
<a href="#">menu_4</a>
<a href="#">menu_4</a>
</div>
<li>
<li>
<a href="#">Test_5</a>
<div class="second">
<a href="#">menu_5</a>
<a href="#">menu_5</a>
<a href="#">menu_5</a>
</div>
<li>
</ul>
<div style="width:800px; clear:both; padding:10px;">
<p>這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字</p>
</div>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
