수평 드롭다운 메뉴

demun
퍼블리셔/jQuery
2012. 7. 6. 06:00

이글은 웹 디자이너를 위한 jquery 에서 추출한 글입니다.
그중에서도 실무에서 써먹을수 있는 것중에서 드롭다운 메뉴를 골라봤습니다.

여기서 말한 드롭다운 메뉴는 이미지가 두개 필요합니다.
하나는 평상시의 이미지고 또하나는 마우스가 오버시 나타나는 이미지입니다.

이미지 경로는 제가 블로그에 업로드한후 수정했습니다. 모르고 그냥 저장을 눌러 다 쓰지도 않은 글이 아마도 발행이 됐을겁니다.ㅎㅎㅎ
다시 수정해서 쓰는 중입니다.
모든 부분은 제외하고 jquery 부분만 설명하겠습니다.
모든 소스 코드는 아래의 파일을 다운로드해서 보시기 바랍니다.

dropdown1.html

아래처럼 보여집니다.

jquery 부분만 설명하겠습니다.
무지하게 간단합니다.
단순이 ul의 자식중에서 animated 되지 않은것은 열고(slideDown), 되는것은 닫습니다(slideUp).
.hover 로 설정을 하지만 마우스오바가 발생했을때는 .slideDown , 마우스아웃이 발생했을때는 .slideUp 처리가 됩니다.

$(function(){
	// 처음부터 서브메뉴인 sub 를 안보이게 합니다.
	$("ul.sub").hide();

	// li 에 마우스 오버시
	$("ul.menu li").hover(function(){

		// 애니메이션 되지 않는것은 slideDown 하고
		$("ul:not(:animated)",this).slideDown("fast");
	},
	function(){

		// 애니메이션 된것은 slideUp 해서 닫습니다.
		$("ul",this).slideUp("fast");
	});
});

참고로 css 로 평상시 배경과 오버시 배경을 설정해 두었습니다.

ul.menu li{
	float:left;
	width:179px;
	height:48px;
	background:url("https://t1.daumcdn.net/cfile/tistory/156F57434FEE502220");
	position:relative;
}
ul.menu li a:hover{
	background:url("https://t1.daumcdn.net/cfile/tistory/166F57434FEE502221");
}

다단계 구조를 지원하는 드롭다운 메뉴

위와 별단 다르지 않지만 중요한것은 2단계 이후의 서브 메뉴는 position이 겹치지 않도록 하기 위해 a 태그에 position:relative 를 설정합니다.
서브메뉴인 ul.sub li ul.sub 는 position:absolute 를 지정해서 부모 태그의 좌상값이 절대값이 되서 그것을 기준으로 top:0; left:179xp를 설정함으로써 나란이 배치되게 됩니다.

참고해서 볼 부분은 아래 부분입니다.

ul.menu li a{
	display:block;
	width:100%;
	height:100%;
	line-height:48px;
	text-indent:30px;
	font-weight:bold;
	color:#CFDFB5;
	text-decoration:none;
	position:relative;
}
ul.sub li ul.sub{
	position:absolute;
	left:179px;
	top:0;
}

다단계 드롭다운 메뉴는 아래러첨 보여집니다.

jquery 부분은 더 간단해졌습니다.
css 에서 설정을 다 해놨기 때문에 자식요소만 찾아서 펼쳐져 잇는지 닫혀져 있는지만 판단해서 slideDown, slideUp 을 처리합니다.

$(function(){
	$("ul.menu li").hover(function(){

		// ul.menu li 의 자식요소인 ul 중에서 animated 되지 않는요소를 찾아서 slideDown 을 합니다.
		$(">ul:not(:animated)",this).slideDown("fast");
	},
	function(){
		$(">ul",this).slideUp("fast");
	});
});

모든 소스 코드는 아래파일을 다운로드 받아서 실행시켜보세요.

dropdown2.html