jQuery实现带动画效果的二级下拉导航方法
本文实例讲述了jQuery实现带动画效果的二级下拉导航方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery二级下滑导菜单</title>
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript"src="jquery.effects.core.min.js"></script>
<styletype="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_listli{float:left;text-align:center; margin-right:10px;position:relative;}
.nav_listlia{width:80px;text-align:center;padding:4px0;text-decoration:none;color:#ccc;background:#996666;display:block;float:left;}
.nav_listlia.current{width:80px;text-align:center;padding:4px0;text-decoration:none;color:#fff;background:#f00;display:block;float:left;}
.nav_listlidiv.second{color:#999999;height:0px;overflow:hidden;position:absolute;left:0;top:22px;width:80px;}
.nav_listlidiv.seconda{background:#666666;color:#fff; border:none;width:80px;border-top:1pxsolid
#FFFFFF;padding:5px0;}
</style>
<scripttype="text/javascript">
$(function(){
Menu(".nav_list");
});
functionMenu(ul_class_name){
Second(".nav_list");
varli_name=ul_class_name+""+"li";
$("div.second").css("opacity","0.1");
$(li_name).hover(
function(){
vara_height= $(this).children("div.seconda:first").css("height");
vara_count=$(this).children("div.second").children("a").length;
varslide_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);
});
}
functionSecond(ul_class_name){
varsecond_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>
<ulclass="nav_list">
<li>
<ahref="#"class="current">Test_1</a>
<divclass="second">
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
</div>
<li>
<li>
<ahref="#">Test_2</a>
<divclass="second">
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
<ahref="#">menu_1</a>
</div>
<li>
<li>
<ahref="#">Test_3</a>
<divclass="second">
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
<ahref="#">menu_3</a>
</div>
<li>
<li>
<ahref="#">Test_4</a>
<divclass="second">
<ahref="#">menu_4</a>
<ahref="#">menu_4</a>
<ahref="#">menu_4</a>
</div>
<li>
<li>
<ahref="#">Test_5</a>
<divclass="second">
<ahref="#">menu_5</a>
<ahref="#">menu_5</a>
<ahref="#">menu_5</a>
</div>
<li>
</ul>
<divstyle="width:800px;clear:both;padding:10px;">
<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。