이 튜토리얼에서는 JQuery 와 CSS를 사용하여 멋진 동적 메뉴를 만드는 방법을 단계별로 설명합니다. jQuery의 "적게 작성하고 더 많이 수행" 기능은 모두에게 잘 알려져 있습니다. 광범위한 JS 프로그래밍 경험이 없는 사람이라도 JS가 제공하는 API를 통해 사용 방법을 빠르게 배울 수 있습니다. jQuery의 각 주요 기능의 구현 원리를 이해할 수 있습니다. 다른 것에 대해서는 이야기하지 말고 이를 사용하여 메뉴의 마법적인 효과를 얻는 방법만 살펴보겠습니다.
.jpg)
클릭하여 데모를 보거나 소스 코드를 다운로드할 수 있습니다.
1단계 - HTML 구조
메뉴의 HTML 코드를 살펴보세요. 일반 메뉴 코드와 다르지 않습니다.
<div id="메뉴" 클래스="메뉴">
<ul>
<li><a href="javascript:;">홈</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">자바스크립트</a></li>
<li><a href="javascript:;">리소스</a></li>
<li><a href="javascript:;">튜토리얼</a></li>
<li><a href="javascript:;">정보</a></li>
</ul>
</div>
핵심은 스크립트를 사용하여 각 앵커 포인트(요소)에 여러 개의 개별 레이어를 생성하여 마우스를 가리키면 개별적으로 애니메이션이 적용되도록 제어할 수 있다는 것입니다. 이를 위해서는 DOM이 로드될 때 DOM의 구조를 수정하여 각 앵커 코드가 다음과 같이 되도록 해야 합니다.
<a href="자바스크립트:;">
<span class="out">홈</span>
<span class="bg"></span>
<span class="over">홈</span>
</a>
각 원본 앵커 포인트의 콘텐츠는 두 개의 범위 요소(.out 및 .over)에 추가되고 다른 범위 요소(.bg)는 배경 이미지 레이어입니다.
DOM 구조를 수정하는 방법은 Step 3에서 JS 코드를 설명하겠습니다.
2단계 - CSS 스타일
예제에서는 배경 이미지가 있는 스타일과 배경 이미지가 없는 스타일의 두 가지가 표시됩니다(자세한 내용은 데모 참조). 또한 자신만의 스타일을 자유롭게 맞춤 설정하여 더 멋진 메뉴를 디자인할 수도 있습니다. :
/* 메뉴의 기본 스타일은 다음과 같습니다.
*/.menuulli{
플로트: 왼쪽;
/* 메뉴 하위 요소의 내용이 보이지 않습니다 */
오버플로: 숨김;
/* 아래 일부 코드는 생략*/
}
.menu ul li a {
/* 상대 위치여야 합니다 */
위치: 상대;
디스플레이: 블록;
너비: 110px;
/* 아래 일부 코드는 생략*/
}
.menu ul li a 범위 {
/* 모든 레이어는 절대 위치 지정을 사용합니다 */
위치: 절대;
왼쪽: 0;
너비: 110px;
}
.menu ul li aspan.out {
상단: 0px;
}
.menu ul li aspan.over,.menu ul li aspan.bg {
/* 처음에는 .over 레이어와 .bg 레이어가 숨겨진 효과를 얻기 위해 a 요소를 기준으로 -45px입니다.*/
상단: -45px;}/
*다음은 배경이미지를 사용한 예시입니다*/
#메뉴 {
/*메뉴 배경*/
배경:url(bg_menu.gif) 스크롤 0 -1px 반복-x;
테두리:1px 실선 #CCC;}
#menu ul li a {
색상: #000;
}
#menu ul li aspan.over {
색상: #FFF;
}
#menu ul lispan.bg {
/* 높이와 배경 이미지 지정*/
높이: 45px;
배경: url(bg_over.gif) 중앙 중앙 no-repeat;
}
CSS 스타일을 직접 사용자 정의할 수도 있으며 스타일의 단순화된 버전도 여기에 제공됩니다( 데모 보기 )