접었다 폈다하는 아코디언 메뉴 3 - 가로메뉴

이번에는 가로로 된 아코디언 메뉴입니다. 이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다.
가로로 된 메뉴는 이전에도 한번 다룬적이 있습니다.
jquery cookbook 에서 다룬것인데요 거기는 수평 아코디언이라고 했습니다.
수평 아코디언 보기 =>  http://demun.tistory.com/2083  

이글은 이전글과 맥락을 같이 함으로 이전글을 참고하시기 바랍니다.
접었다 폈다하는 아코디언 메뉴 1 =>  http://demun.tistory.com/2141 
접었다 폈다하는 아코디언 메뉴 2 =>  http://demun.tistory.com/2142 

이번에도 이미지가 들어가므로 이미지는 제가 블로그에 업로드한후 경로를 수정했습니다.
가로로 된 아코디언은 라벨 부분이 세로로 표현이 되야하는데 글자로는 세로로 표현이 안되므로 이미지를 사용합니다.
라벨을 이미지로 만들기위해 dl 태그를 div 태그로 감싸고 각각의 dt 에 id 를 추가하였으며, dt 태그안에 span 태그를 추가하였습니다.
그래서 대략적인 html 은 다음과 같습니다.

<div>
	<dl>
		<dt id="step1"><span>Step.1</span></dt>
		<dd><p>....</p></dd>
		<dt id="step2"><span>Step.2</span></dt>
		<dd><p>.... </p></dd>
		<dt id="step3"><span>Step.3</span></dt>
		<dd><p>.... </p></dd>
	</dl>
</div>

dt , dd 태그는 float:left 를 사용해 옆으로 나란히 배치하고 있습니다.
중요한 점은 dl 태그의 폭은 dt 태그 (35px * 3) 과 dd 태그(695px) 합친 값이 되야 하므로 800px 가 되야하지만 패널이 열고 닫히는 순간에 800px 를 넘어버리는 잘려버리는 경우가 있을 수 있기 때문에 걍 900px 로 설정하여 라인이 잘리는 것을 막습니다.

그대신 dl 태그를 감사는 div 태그에 width:800px; overflow:hidden; 을 설정하여 남는 100px 만큼 숨기고 있습니다.
전체 소스코드는 아래의 파일을 참고하세요.

accodion-3.html

대략적인 모습은 아래의 이미지를 참고하세요. 마찬가지로 마우스 오버시 색이 틀리지요.

 

jquery 부분만 설명하겠습니다.

$(function(){

	// 첫번째 dd 가 아닌것은 너비를 0으로 해서 안보이게 합니다.
	$("dd:not(:first)").css("width","0px");

	// 첫번째 dt 태그의 span 에 selected 클래스를 추가합니다.펼쳐져 있는 스타일 추가.
	$("dt:first span").addClass("selected");

	// dt 를 클릭하면
	$("dl dt").click(function(){

		// 만약 클릭된 라벨 즉 인접한 dd 의 넓이가 0으로 안보이면 다음코드를 진행. 
		if($("+dd",this).css("width")=="0px"){

			// dt 태그중에서 selected 클래스를 가지고 있는 dd 태그의 폭을 0으로 만듭니다.
			// 즉 선택되어 있는 상태인 dt태그의 다음 dd 태그의 폭을 0으로 해서 패널이 닫힙니다.
			$("dt:has(.selected) +dd").animate({"width":"0px"});

			// 같은식을로 dd 의 폭을 695로 펼칩니다.
			$("+dd",this).animate({"width":"695px"});

			// 클릭된 라벨을 선택된 상태로 만들기위해 모든 selected 클래스를 삭제합니다.
			$("dt span").removeClass("selected");

			// 그리고 다시 현재의 dd 태그의 span 에만 selected 클래스를 추가해서 현재의 라벨만 클릭된 요소라는것을 보여줌.
			$("span",this).addClass("selected");
		}

	// 마찬가지로 mouseover, mouseout 으로 마우스 롤오버 처리.
	}).mouseover(function(){
		$("span",this).addClass("over");
	}).mouseout(function(){
		$("span",this).removeClass("over");
	});
});

책이 정말 쉽게 잘 설명을 해놓았습니다.
그래서 저도 쉽게 설명을 할려고 하는데 잘 안되네요...