JS·经典·炫彩菜单(动画效果) for jquery

 

CSS样式

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 >

 

 

JS代码

/*
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 (){
MenuShowOrHide = false ;
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 );
}

 

 

 

Demo 下载地址 http://files.cnblogs.com/keke/菜单.rar

转载于:https://www.cnblogs.com/keke/archive/2010/01/25/1655833.html