접었다 폈다하는 아코디언 메뉴 2

게시자: 대문 demun 카테고리: 퍼블리셔/jQuery 2012.07.03 06:00
이번에는 저번에 이어 좀더 개선된 아코디언 메뉴입니다.
마찬가지로 소스는 웹디자이너를 위한 jQuery 에서 추출한 것입니다.
실무에서 이용할만한 것을 추출해서 소개하고 있습니다.

이번에는 이미지가 들어가서 마우스를 오버했을때를 강조하여 좀더 보기조은 아코디언을 만들었습니다.
한가지 더 이미지가 3개가 포함이 되므로 제가 블로그에 업로드한 후 그걸 배경으로 사용했습니다.
이전글과 연동되므로 이전글을 참고해주세요.
접었다 폈다하는 아코디언 메뉴 1 =>  http://demun.tistory.com/2141 

마우스가 손모양으로 바뀐것과 현재 선택되어진곳은 색깔이 다른것을 알 수 있습니다.


참고할 스타일 설정부분은 아래와 같습니다.

dt{
	line-height:35px;
	font-size:large;
	text-indent:3em;
	font-weight:bold;
	color:white;
	height:35px;
	background:url("http://cfile29.uf.tistory.com/image/11558E424FEE324E2722E9"); /* background image */
}
dt.over{
	background:url("http://cfile1.uf.tistory.com/image/20558E424FEE324E2693F1"); /* background-over.jpg */
	cursor:pointer; /* 마우스가 손모양이 되도록 설정. 여기가 클릭을 할 곳이라는것을 알려주는 것입니다. */
}
dt.selected{
	background:url("http://cfile25.uf.tistory.com/image/12558E424FEE324E282F09"); /* background_selected.jpg */
	cursor:default;
	color:black;
}


jquery 설명부분은 아래와 같습니다.
여기서는 마우스가 올라가면 over 이라는 클래스를 추가하고 나가면 제거를 합니다.
over 는 위처럼 css 에서 설정을 해놓습니다.

$(function(){

	// 첫번째 dd 가 아닌것은 안보이게 설정.
	$("dd:not(:first)").css("display","none");

	// 첫번째 dt 에 selected 클래스를 부여합니다.
	$("dt:first").addClass("selected");

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

		// 만약 클릭한 요소의 인접한 dd 가 안보이면 
		if($("+dd",this).css("display")=="none"){

			// dd 를 슬라이더 업
			$("dd").slideUp("slow");

			// 인접한 dd 는 슬라이드 다운하고
			$("+dd",this).slideDown("slow");

			// 위에서 추가한 dt 에 selected 클래스를 삭제합니다.
			$("dt").removeClass("selected");

			// 다시 selected 클래스를 추가합니다.
			$(this).addClass("selected");
		}

	// 롤오버효과를 내기위해 mouseover 와 mouseout 이벤트를 설정합니다.
	}).mouseover(function(){

		// dt 에 마우스가 올라가면 over 클래스를 추가하고
		$(this).addClass("over");

	// dt 에 마우스가 나가면 over 클래스를 삭제합니다.
	}).mouseout(function(){
		$(this).removeClass("over");
	});
});


 
신고

댓글

  1. 2012.08.10 16:35 신고 김개코  댓글주소  수정/삭제  댓글쓰기

    홈페이지 작업에 너무 유용하네요. ^_^
    약간 아쉬운 점이 있다면 dt를 클릭하여 움직일 때
    맨 마지막 dt가 조금씩 떨리는 현상이 있는 점이네요...

  2. 2014.10.29 17:31 신고 이은규  댓글주소  수정/삭제  댓글쓰기

    위의 아코디언 메뉴2에서 첫번째가 로딩시 항상 펼쳐져 있는데 두번째 혹은 세번째가 펼쳐져 있게 하려면 어떻게 해야 하나요?