jquery 经典动画菜单效果代码

body 
{ 
font-size:12px; 
} 
.menuBox 
{ 
width:50%; 
height:auto; 
margin:0 auto; 
} 
.menuBox ul 
{ 
margin:0px; 
padding:0px; 
} 
.menuBox ul li 
{ 
float:left; 
display:block; 
width:18%; 
height:30px; 
line-height:25px; 
list-style:none; 
margin-right:1px; 
} 
.menuBox ul li a 
{ 
display:block; 
width:100%; 
height:100%; 
background-color:Black; 
color:White; 
text-decoration:none; 
text-align:center; 
} 
.menuBox ul li a:hover 
{ 
display:block; 
width:100%; 
height:100%; 
background-color:Silver; 
color:Red; 
text-decoration:none; 
} 
.menuSelected 
{ 
display:block; 
width:100%; 
height:100%; 
background-color:Silver; 
color:Red; 
text-decoration:none; 
} 
.chideMenuForShow 
{ 
width:200px; 
position:absolute; 
height:auto; 
border:1px solid #ccc; 
float:right; 
background-color:Silver; 
}

HTML代码

<div class='menuBox'> 
<ul id='ul_menu'> 
<li> 
<a href='#'>menu1</a> 
<div class="chideMenuForShow"> 
<div>menu1</div> 
<div>menu1</div> 
<div>menu1</div> 
<div>menu1</div> 
<div>menu1</div> 
<div>menu1</div> 
<div>menu1</div> 
<div>menu1</div> 
<div>menu1</div> 
<div>menu1</div> 
</div> 
</li> 
<li> 
<a href='#'>menu2</a> 
<div class="chideMenuForShow"> 
<div>menu2</div> 
<div>menu2</div> 
<div>menu2</div> 
<div>menu2</div> 
<div>menu2</div> 
<div>menu2</div> 
</div> 
</li> 
<li> 
<a href='#'>menu3</a> 
<div class="chideMenuForShow"> 
<div>menu3</div> 
<div>menu3</div> 
<div>menu3</div> 
<div>menu3</div> 
<div>menu3</div> 
</div> 
</li> 
<li> 
<a href='#'>menu4</a> 
<div class="chideMenuForShow"> 
<div>menu4</div> 
<div>menu4</div> 
<div>menu4</div> 
<div>menu4</div> 
<div>menu4</div> 
<div>menu4</div> 
</div> 
</li> 
<li> 
<a href='#'>menu5</a> 
<div class="chideMenuForShow"> 
<div>menu5</div> 
<div>menu5</div> 
<div>menu5</div> 
<div>menu5</div> 
<div>menu5</div> 
<div>menu5</div> 
</div> 
</li> 
</ul> 
</div>

Javascript代码

/* 
menu for javascript 
author:mr·zhong 
date:2010-01-25 
*/ 
/*判断当前子菜单显示或隐藏*/ 
var MenuShowOrHide = false; 
$(function(){ 
SetMenuID(); 
BindMenuHoverEval(); 
BindChideMenuHoverEval(); 
}); 
/* 
设置主、子菜单按钮ID 
*/ 
function SetMenuID(){ 
var id = 1; 
$('#ul_menu a').each(function(){ 
$(this).attr("id","a_" + id); 
var chideObj = $(this).next(); 
chideObj.attr("id","ChideMenu_a_" + id); 
chideObj.hide(); 
id++; 
}); 
} 
/* 
设置菜单颜色样式 
*/ 
function SetMenuColor(menuID,isSelected){ 
if(isSelected) $("#" + menuID).addClass("menuSelected"); 
else $("#" + menuID).removeClass("menuSelected"); 
} 
/* 
设置子菜单显示或隐藏 
*/ 
function ShowOrHideChideMenu(menuID,isShow){ 
var obj = $("#" + menuID); 
if(isShow) 
{ 
obj.slideDown("slow"); 
} 
else obj.hide("slow"); 
} 
/* 
绑定主菜单鼠标事件 
*/ 
function BindMenuHoverEval(){ 
$("#ul_menu a").each(function(){ 
$(this).hover(function(){ 
ShowOrHideChideMenu("ChideMenu_" + $(this).attr("id"),true); 
MenuShowOrHide = true; 
},function(){ 
setTimeout('Hide(ChideMenu_' + $(this).attr("id") +')',500); 
}); 
}); 
} 
/* 
绑定子菜单鼠标事件 
*/ 
function BindChideMenuHoverEval(){ 
$("#ul_menu .chideMenuForShow").each(function(){ 
$(this).hover(function(){ 
MenuShowOrHide = true; 
},function(){ 
MenuShowOrHide = false; 
Hide($(this).attr("id")); 
}); 
}); 
} 
/* 
隐藏子菜单 
*/ 
function Hide(id){ 
if(!MenuShowOrHide) ShowOrHideChideMenu(id,false); 
}

下载地址:https://3water.com/jiaoben/24160.html