Jquery classic animation menu effect code _ jquery

JS & #183; classic & #183; colorful menu (animation effect) forjquery The Code is as follows:

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

The Code is as follows:

• 
  Menu1
  

  
  

  Menu1

  
  

  Menu1

  
  

  Menu1

  
  

  Menu1

  
  

  Menu1

  
  

  Menu1

  
  

  Menu1

  
  

  Menu1

  
  

  Menu1

  
  

  Menu1

  
  
  
  


• 
  Menu2
  

  
  

  Menu2

  
  

  Menu2

  
  

  Menu2

  
  

  Menu2

  
  

  Menu2

  
  

  Menu2

  
  
  
  


• 
  Menu3
  

  
  

  Menu3

  
  

  Menu3

  
  

  Menu3

  
  

  Menu3

  
  

  Menu3

  
  
  
  


• 
  Menu4
  

  
  

  Menu4

  
  

  Menu4

  
  

  Menu4

  
  

  Menu4

  
  

  Menu4

  
  

  Menu4

  
  
  
  


• 
  Menu5
  

  
  

  Menu5

  
  

  Menu5

  
  

  Menu5

  
  

  Menu5

  
  

  Menu5

  
  

  Menu5

  
  
  
  

Javascript code

The Code is as follows:

/*
Menu for javascript
Author: mr zhong
Date: 2010-01-25
*/
/* Determine whether the current sub-menu is displayed or hidden */
Var MenuShowOrHide = false;
$ (Function (){
SetMenuID ();
BindMenuHoverEval ();
BindChideMenuHoverEval ();
});
/*
Set the ID of the main and sub-menu buttons
*/
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 ++;
});
}
/*
Set Menu color styles
*/
Function SetMenuColor (menuID, isSelected ){
If (isSelected) $ ("#" + menuID). addClass ("menuSelected ");
Else $ ("#" + menuID). removeClass ("menuSelected ");
}
/*
Set sub-menu display or hide
*/
Function ShowOrHideChideMenu (menuID, isShow ){
Var obj = $ ("#" + menuID );
If (isShow)
{
Obj. slideDown ("slow ");
}
Else obj. hide ("slow ");
}
/*
Bind the main menu mouse event
*/
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 );
});
});
}
/*
Bind a sub-menu mouse event
*/
Function BindChideMenuHoverEval (){
$ ("# Ul_menu. chideMenuForShow"). each (function (){
$ (This). hover (function (){
MenuShowOrHide = true;
}, Function (){
MenuShowOrHide = false;
Hide ($ (this). attr ("id "));
});
});
}
/*
Hide sub-menu
*/
Function Hide (id ){
If (! MenuShowOrHide) ShowOrHideChideMenu (id, false );
}

: Http://www.jb51.net/jiaoben/24160.html