jQuery_jquery를 사용하여 동적 드롭다운 메뉴를 생성하기 위한 구현 지침

jQuery의 "적게 작성하고 더 많이 수행" 기능은 모두에게 잘 알려져 있습니다. 광범위한 JS 프로그래밍 경험이 없는 사람이라도 JS가 제공하는 API를 통해 사용 방법을 빠르게 배울 수 있습니다. jQuery의 각 주요 기능의 구현 원리를 이해할 수 있습니다. 다른 것에 대해서는 이야기하지 말고 이를 사용하여 메뉴의 마법적인 효과를 얻는 방법만 살펴보겠습니다.

1단계 - HTML 구조
메뉴의 HTML 코드를 살펴보세요. 일반 메뉴 코드와 다르지 않습니다.

코드 복사 코드는 다음과 같습니다.

🎜>

• 홈


• HTML/CSS< /a>


• 자바스크립트

< li>리소스

• 자습서< /li>
• 정보

>

　Key 스크립트를 사용하여 각 앵커 포인트(요소)에 여러 개의 분리 레이어를 생성하여 마우스를 올렸을 때 애니메이션이 작동하도록 제어할 수 있는 방법입니다. 이를 위해서는 DOM이 로드될 때 각 앵커 코드가 다음과 같이 되도록 DOM의 구조를 수정해야 합니다.

코드 복사

코드는 다음과 같습니다. Home >

원본 각각 앵커 포인트의 내용은 두 개의 스팬 요소(.out 및 .over)에 추가되고, 다른 스팬 요소(.bg)는 배경 이미지 레이어입니다.
DOM 구조를 수정하는 방법은 Step 3에서 JS 코드를 통해 설명하겠습니다.

2단계 - CSS 스타일

이 예에서는 두 가지 스타일이 표시됩니다. 하나는 배경 이미지가 있고 다른 하나는 배경 이미지가 없습니다(자세한 내용은 데모를 참조하세요). 더 멋진 메뉴를 디자인하기 위한 스타일, 기본 스타일과 설명은 여기서 제공됩니다:


코드 복사

코드는 다음과 같습니다. /* 다음은 메뉴의 기본 스타일입니다*/ .menu ul li { float: left

/* 메뉴 하위 요소의 내용이 초과됩니다. 보이지 않는 수준*/

오버플로: 숨겨진;
/* 아래에서는 일부 코드가 생략됨*/
}
.menu ul li a {
/* 상대 위치 지정이 필요함*/
위치: 상대;
디스플레이: 블록;
너비: 110px;
/* 아래 일부 코드는 생략됨*/
}
.menu ul li a 범위 {
/* 모든 레이어는 절대 위치 지정을 사용합니다.*/
position:absolute;
left: 0;
width: 110px;
}
.menu ul li aspan.out {
top: 0px;
}
.menu ul li aspan.over,
.menu ul li aspan.bg {
/* 처음에는 .over 레이어와 .bg 레이어가 -45px 상대입니다. 숨겨진 효과를 얻기 위해 a 요소에 추가*/
top: -45px
}
/* 다음은 배경 이미지 사용 예입니다*/
#menu {
　/ * 메뉴 배경*/
배경:url(bg_menu.gif) 스크롤 0 - 1px 반복-x;
테두리:1px 솔리드
}
#menu ul li a {
color: #000;
}
#menu ul li a span. {
color: #FFF
}
#menu ul lispan.bg {
　/* 지정 높이 및 배경 이미지*/
높이: 45px;
배경: url (bg_over.gif) 센터 센터 no-repeat
}


CSS 스타일을 맞춤설정할 수도 있습니다. 스타일의 단순화된 버전도 여기에 제공됩니다(데모 보기)

3단계 - JavaScript 코드

가장 먼저 해야 할 일은 1단계에서 언급한 내용을 구현하고 DOM이 로드된 후의 구체적인 방법은 다음과 같습니다.


코드 복사

코드는 다음과 같습니다.

// 각 a의 콘텐츠를 레이어(span.out)에 포함하고,
// 그런 다음 span.out 레이어 뒤에 배경 레이어(span.bg)를 추가합니다.
$(" #menu li a").wrapInner( '' )
　　　　　.append( '< /span>' );
// 메뉴의 각 a에 대해 레이어(span.over)를 추가하는 루프
$("#menu li a").each(function() {
　$( '< span class="over">' $(this).text() '' )
　　　　.appendTo( this )
}); 애니메이션 코드에 대해 이야기하면서 아래 그림과 같이 애니메이션 프로세스를 살펴보겠습니다.

1단계에서 우리는 DOM이 로드된 후 DOM에 여러 분리 레이어가 설정된다는 것을 알고 있습니다. 2단계에서는 CSS 스타일에서span.bg 및span.over레이어의 최상위 속성을 -45px로 설정했습니다. 범위 요소는 절대 위치로 설정되었기 때문에 위쪽으로 -45px가 됩니다. li 요소입니다. li 요소의 내용이 Visible을 초과하므로 처음에는 .bg 레이어와 .over 레이어가 공간 범위를 벗어납니다.
우리가 설정하려는 애니메이션 프로세스는 마우스를 가리키면 세 개의 레이어가 동시에 아래로 이동하고,span.out 레이어는 아래로 이동하여 가시 범위를 제거하고,span.over 및 span.bg move in 가시 영역에서는span.bg를 설정하는 속도가span.over보다 약간 빠르며 정렬이 잘못되면 더 많은 영향을 미칩니다.

이러한 애니메이션 효과를 얻으려면 jQuery의 .animate() 메소드를 사용하면 쉽습니다. JS 코드와 설명은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. $("#menu li a").hover(function() {

　 // 다음과 같은 경우에 실행되는 함수 마우스를 가리키면

$(".out",this).stop().animate({'top':'45px'},250);//숨기려면 슬라이드
$(".over", this).stop().animate({'top':'0px'},250); //아래로 밀어
$(".bg",this).stop().animate({'top ':'0px '},120); //아래로 스크롤하여 표시
}, function() {
// 마우스를 밖으로 이동할 때 실행되는 함수
$(".out", this).stop().animate ({'top':'0px'},250); //위로 스와이프하여 표시
$(".over",this).stop().animate({'top ':'-45px'}, 250);//숨기려면 위로 밀어
$(".bg",this).stop().animate({'top':'-45px'},120); //Slide up to hide
});


요약
위 내용은 jQuery 동적 드롭다운 메뉴를 만드는 방법을 단계별로 설명합니다. , 또는 소스 코드를 다운로드하여 수정하고 사용자 정의할 수 있습니다. 제안 사항이나 질문이 있으면 메시지를 남겨주세요.

　
최종 효과 보기

jOuery 동적 슬라이딩 메뉴 패키지 다운로드



PS: 이 글은 비치에 의해 요약되었습니다.