jQuery 다단 네비게이션 플러그인

jQuery/jQuery플러그인 2010.04.01 16:20

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

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바