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;

　　}

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

　　/*

　　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);

　　}