jQuery 다단 네비게이션 플러그인
다단 네비게이션을 jQuery를 통해 쉽게 만들어보자 목표는 흔히보는 아래 그림과 같은 네비게이션을 구해볼것이다.
출처는http://plugins.jquery.com/project/jfastmenu
기본 html
메인메뉴는 5개로나누어진다.홈,그림,음악,방명록,잡다이것을 리스트로 코딩하자
- 홈
- 그림
- 음악
- 방명록
- 잡다
세분화한 카테고리로 그림안에 일반,디자인,미술가를 더 넣을것이다.또 거기에 좀더 넣어 다단계로 만든다.아래와같은 결과.
소스는 다음과 같다.
jquery로 작동 시키기
이제 플러그인의 기능을 이용하여 작동시켜보자. CSS꾸밈없이 작동여부만 확인한다.사용방법은 플러그인이라서 간단하다.
내용에 위와같은 아이디를 지정해주고 아래와 같이 사용
$(document).ready(function(){
$.jFastMenu("#menu");
});
CSS로 꾸미기
css에서 중요한것은 별반없다. 네비게이션의 색깔, 호버시 색깔,이 정도는 잘알것이다.중요한것은 다단계 레이아웃이므로 호버 전 기본 초기값으로 하위 네비게이션(예제 같은경우 일반,디자인,미술가등등)을 display :none으로 감춰주는것이다.나머지는 꾸밈으로 사용자가 원하는데로.
#menu{
font-family:tahoma, verdana, arial;
font-size:11px;
}
#menu ul{
list-style:none;
margin:0px;
padding:0px;
}
#menu ul li{
float:left;
margin:0px;
padding:0px;
position:relative;
}
#menu ul li a{
background-color:#EFEFEF;
color:#000;
display:block;
margin:0px;
padding:10px;
text-decoration:none;
}
#menu ul li a:hover{
background-color:#E9E9E9;
color:#000;
}
#menu ul li ul{
position:absolute;
display:none;
/*일반,디자인,미술가를 초기값으로 보이지않게한다.*/
}
#menu ul li ul li{
clear:left;
}
#menu ul li ul li a{
text-decoration:none;
width:120px;
}
#menu ul li ul li ul{
clear:left;
display:none;
/*디자인,미술가의 하위네비를 감춘다.*/
left:140px;
/* Bengin CSS-HACK, for Microsoft Internet Explorer */
_left:120px;
/* End CSS-HACK */
position:absolute;
top:0px;
}
마지막으로 살필것은 IE핵
완성된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/JP_fastnav.html
댓글