jquery 클래식 애니메이션 메뉴 효과 code_jquery

复代码 代码如下:

body
{
font-size:12px;
}
.menuBox
{
너비:50%;
높이:자동;
여백:0 자동;
}
.menuBox ul
{
margin:0px;
패딩:0px;
}
.menuBox ul li
{
float:left;
디스플레이:블록;
폭:18%;
높이:30px;
줄 높이:25px;
목록 스타일:없음;
여백 오른쪽:1px;
}
.menuBox ul li a
{
display:block;
폭:100%;
높이:100%;
배경색:검정색;
색상:흰색;
텍스트 장식:없음;
텍스트 정렬:가운데;
}
.menuBox ul li a:hover
{
display:block;
폭:100%;
높이:100%;
배경색:은색;
색상:빨간색;
텍스트 장식:없음;
}
.menuSelected
{
display:block;
폭:100%;
높이:100%;
배경색:은색;
색상:빨간색;
텍스트 장식:없음;
}
.chideMenuForShow
{
너비:200px;
위치:절대;
높이:자동;
테두리:1px 단색 #ccc;
플로트:오른쪽;
배경색:은색;
}

HTML代码

复代码 代码如下:

• 
  menu1
  
  
  

  메뉴1

  
  

  메뉴1

  
  

  메뉴1

  
  

  메뉴1

  
  

  메뉴1

  
  

  메뉴1

  
  

  메뉴1

  
  

  메뉴1

  
  

  메뉴1

  
  

  메뉴1

  
  
  
  


• 
  메뉴2
  
  
  

  메뉴2

  
  

  메뉴2

  
  

  메뉴2

  
  

  메뉴2

  
  

  메뉴2

  
  

  메뉴2

  
  
  
  


• 
  메뉴3
  
  
  

  메뉴3

  
  

  메뉴3

  
  

  메뉴3

  
  

  메뉴3

  
  

  메뉴3

  
  
  
  


• 
  menu4
  
  
  

  메뉴4

  
  

  메뉴4

  
  

  메뉴4

  
  

  메뉴4

  
  

  메뉴4

  
  

  메뉴4

  
  
  
  


• 
  메뉴5
  
  
  

  메뉴5

  
  

  메뉴5

  
  

  메뉴5

  
  

  메뉴5

  
  

  메뉴5

  
  

  메뉴5

  
  
  
  

Javascript代码

复代码 代码如下:

/*
javascript 메뉴
author:mr·zhong
날짜:2010-01-25
*/
/*현재 하위 메뉴가 표시되는지 여부를 결정합니다. Hidden* /
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)
}


주소 다운로드 :
http://www.jb51.net/jiaoben/24160.html