jQuery 동적 하강 메뉴 만 들 기 설명

jQuery 의"write less,do more"의 특성 은 누구나 다 알 고 있 습 니 다.JS 프로 그래 밍 경험 이 풍부 한 사람 이 없 더 라 도 제공 하 는 API 를 통 해 어떻게 사용 하 는 지 빨리 배 울 수 있 습 니 다.물론 경험 이 풍부 하 다 면 jQuery 각 주요 함수 의 실현 원 리 를 이해 하 는 것 을 권장 합 니 다.다른 것 은 말 하지 않 고 메뉴 의 신기 한 효 과 를 어떻게 실현 하 는 지 직접 보 세 요.Step 1-HTML 구 조 는 메뉴 의 HTML 코드 를 살 펴 보면 일반적인 메뉴 코드 와 다 를 것 이 없다Step 1-HTML 구 조 는 스 크 립 트 를 이용 하여 각 닻 점(a 요소)에 몇 개의 분리 층 을 만 드 는 것 이 관건 이다.그러면 마우스 가 멈 출 때 각각 움 직 이 는 그림 을 제어 할 수 있다.이 를 위해 우 리 는 DOM 로드 가 완 료 될 때 DOM 의 구 조 를 수정 하여 모든 닻 코드 를 다음 과 같이 바 꿔 야 한다

 
<div id="menu" class="menu"> 
<ul> 
<li><a href="javascript:;">Home</a></li> 
<li><a href="javascript:;">HTML/CSS</a></li> 
<li><a href="javascript:;">JavaScript</a></li> 
<li><a href="javascript:;">Resources</a></li> 
<li><a href="javascript:;">Tutorials</a></li> 
<li><a href="javascript:;">About</a></li> 
</ul> 
</div> 

원래 의 모든 닻 점 의 내용 은 두 개의 span 요소(out 과 over)에 추가 되 고 다른 span 요소(.bg)는 배경 그림 층 이다.DOM 구 조 를 어떻게 수정 하 는 지 에 대해 JS 코드 는 Step 3 에서 설명 할 것 이다.Step 2-CSS 스타일 은 예제 에서 두 가지 스타일 을 보 여 주 었 습 니 다.배경 그림 을 사용 하 는 것 과 배경 그림 을 사용 하지 않 은 것(구체 적 으로 프 리 젠 테 이 션 보기)이 있 습 니 다.또한 자신의 스타일 을 자 유 롭 게 맞 춰 서 더욱 멋 진 메뉴 를 디자인 할 수 있 습 니 다.여기 서 기본 적 인 스타일 과 설명 을 제공 합 니 다

 
<a href="javascript:;"> 
<span class="out">Home</span> 
<span class="bg"></span> 
<span class="over">Home</span> 
</a> 

CSS 스타일 을 자체 적 으로 맞 출 수 있 습 니 다.여기 서 간단 한 스타일(프레젠테이션 보기)Step 3-JavaScript 코드 를 제공 합 니 다.먼저 Step 1 에서 말 한 것 을 실현 하고 DOM 로드 가 완 료 된 후에 DOM 구 조 를 수정 하 는 것 입 니 다.구체 적 인 방법 은 다음 과 같 습 니 다

 
/*            */ 
.menu ul li { 
float: left; 
/*               */ 
overflow: hidden; 
/*          */ 
} 
.menu ul li a { 
/*         */ 
position: relative; 
display: block; 
width: 110px; 
/*          */ 
} 
.menu ul li a span { 
/*            */ 
position: absolute; 
left: 0; 
width: 110px; 
} 
.menu ul li a span.out { 
top: 0px; 
} 
.menu ul li a span.over, 
.menu ul li a span.bg { 
/*   .over  .bg   a  -45px         */ 
top: -45px; 
} 
/*             */ 
#menu { 
　　/*      */ 
background:url(bg_menu.gif) scroll 0 -1px repeat-x; 
border:1px solid #CCC; 
} 
#menu ul li a { 
color: #000; 
} 
#menu ul li a span.over { 
color: #FFF; 
} 
#menu ul li span.bg { 
　　/*          */ 
height: 45px; 
background: url(bg_over.gif) center center no-repeat; 
} 

애니메이션 코드 를 이야기 하기 전에 애니메이션 의 과정 을 먼저 보 세 요.다음 그림 과 같 습 니 다Step 1 에서 DOM 로드 를 알 게 된 후에a 요소 에 몇 개의 분리 층 을 만 들 었 습 니 다.Step 2 에서 CSS 스타일 에서 저 희 는 span.bg 와 span.over 층 의 top 속성 을-45px 로 설정 하 였 습 니 다.span 요 소 는 절대적 인 위치 로 설정 되 었 기 때문에 li 요소 에 비해 위로-45px 를 설정 합 니 다.li 요소 의 내용 이 보이 지 않 기 때문에 시작 할 때.bg 층 과.over 층 은 공간 범위 밖 에 있 습 니 다.우리 가 설정 하고 자 하 는 애니메이션 과정 은 마우스 가 멈 출 때 세 층 이 동시에 아래로 이동 하고 span.out 층 은 보 이 는 범 위 를 제거 할 때 까지 아래로 이동 합 니 다.span.over 와 span.bg 는 보 이 는 구역 으로 이동 합 니 다.span.bg 속 도 는 span.over 속도 보다 약간 빠 르 고 잘못된 위치 가 더욱 효과 적 입 니 다.이러한 애니메이션 효 과 를 실현 하려 면 jQuery 의.animate()방법 을 사용 하면 쉽게 실현 할 수 있 습 니 다.다음은 JS 코드 와 설명 입 니 다

 
//    a          （span.out） ， 
//     span.out         （span.bg） 
$("#menu li a").wrapInner( '<span class="out"></span>' ) 
　　　　　　　　　.append( '<span class="bg"></span>' ); 
//       a       （span.over） 
$("#menu li a").each(function() { 
　　$( '<span class="over">' + $(this).text() + '</span>' ) 
　　　　　　　　　.appendTo( this ); 
}); 

이상 에서 jQuery 동적 하강 메뉴 를 어떻게 만 드 는 지 설명 하 였 습 니 다.귀 하 는 순서대로 하 나 를 실현 할 수 있 고 소스 코드 를 다운로드 하여 맞 춤 형 제작 을 수정 할 수 있 습 니 다.물론 좋 은 제안 이나 문제 가 있 습 니까?메모 남 겨 주세요.PS:본 고 는최종 효과 보기총 결