수평 드롭다운 메뉴

게시자: 대문 demun 카테고리: 퍼블리셔/jQuery 2012.07.06 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("http://cfile24.uf.tistory.com/image/156F57434FEE502220C0BC");
	position:relative;
}
ul.menu li a:hover{
	background:url("http://cfile7.uf.tistory.com/image/166F57434FEE502221B28F");
}

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


위와 별단 다르지 않지만 중요한것은 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


다른 드롭다운 메뉴

jQuery 드롭다운메뉴 사용하는 방법-jquery.droppy.js =>  http://demun.tistory.com/2082
수평 드롭다운 메뉴 =>  http://demun.tistory.com/2145
CSS 3 드롭다운 에니메이션 메뉴 =>  http://demun.tistory.com/2161
티스토리 카테고리 메뉴를 드롭다운으로 이용하는 방법 =>  http://demun.tistory.com/2175
수평 드롭다운 메뉴바 달기(jquery이용) Horizontal CSS Menus =>  http://demun.tistory.com/1672
이미지가 필요없는 css 드롭다운 메뉴 Vertical css menu =>  http://demun.tistory.com/1613
티스토리 블로그메뉴를 드롭다운으로 이용하는 방법 =>  http://demun.tistory.com/2174
css 애니메인션 드롭다운 =>  http://demun.tistory.com/2310


신고

댓글

  1. 2012.07.07 19:42 신고 BlogIcon 세릭  댓글주소  수정/삭제  댓글쓰기

    포스트 매우 잘 보고 있습니다. 매번 사용하고 싶었던 기능이어서 바로 블로그에 적용을 해봤습니다.

    http://selic.pe.kr/

    그런데 페이지가 리로딩 될 때 서브메뉴가 전부 펼쳐졌다가 다시 원상태로 돌아가는 현상이 발생을 합니다.

    해결방법이 없는지 궁금합니다. 감사합니다. ^^

    • BlogIcon 대문 demun 2012.07.07 20:53 신고  댓글주소  수정/삭제

      문제가 없어 보입니다.
      서브 페이지가 펼쳐졌다가 다시 원상태로 가는것은 $(document).ready(function(){} 을 쓰던가 아님 자바스크립트가 body 위에 있는경우인데...그렇지 않은것 같습니다.

  2. 2012.07.07 21:27 신고 BlogIcon 세릭  댓글주소  수정/삭제  댓글쓰기

    ul.menu li ul.sub{

    position:absolute;
    display: none;
    }

    다른곳에 가보니 display: none; 이 부분이 JS가 로딩되지 않았다면 서브 페이지를 열지 않기. 라고 주석이 달려있더라구요. 이 부분을 추가하니 리로딩될 때 서브페이지가 안열리네요. ^^

  3. 2012.10.17 17:44 신고 peco  댓글주소  수정/삭제  댓글쓰기

    검색하다가 알게되어서 요즘 블로그 보면서 따라해 보고 응용해 보려고하는데요
    $(function(){
    $("ul.sub").hide();
    $("ul.menu li a").click(function(){
    $("ul.menu li a").next().slideUp("fast");
    if($(this).next().css("display","block")){
    $(this).next().slideDown("fast");
    } else {

    $(this).next().slideUp("fast");
    }
    });
    });
    이렇게 좀 변경해서 작업하면 ul.sub> li를 클릭해두slideup이 되더라구요.
    또 한가지는 위에 예시로 올려주신거처럼 hover 대신 click을 사용하거나 .bind('focus mouseOver', function(){}) 이렇게 하면 기능이 구현되지 않더라구요 ㅠㅠ
    궁금해서 여쭤봅니다^^;

  4. 2013.05.13 22:49 신고 BlogIcon 하늘과 나  댓글주소  수정/삭제  댓글쓰기

    제 블로그에도 적용을 해봐야 겠네요!
    감사합니다^^

  5. 2014.07.08 17:49 신고 ^^  댓글주소  수정/삭제  댓글쓰기

    탭기능을 넣어서 해보려 했으나 잘 안되네요 ㅠㅠ
    어떻게 추가 하면 될까요?!

    • BlogIcon 대문 demun 2014.07.10 21:58 신고  댓글주소  수정/삭제

      탭하고는 기능상 조금 다릅니다. 탭관련 글을 검색해보세요....댓글로 탭을 이야기하기에는 무리가 있습니다.
      시간나는대로 실무에서 적용하는 탭기능을 써보죠.