jQuery로 2단 메뉴 구현, 따라하기

“jQuery”나 “jQuery 탭”, “jQuery 메뉴” 검색어로 후니넷에 방문하는 분들이 많은데, 무려 4년 전인 2007년에 작성한 글만 보고 되돌아가기에, jQuery로 가로형 2단 메뉴를 구현하는 코드를 업데이트합니다.

위키백과에선 아래와 같이 jQuery를 소개합니다.

jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레식에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다.

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.

jQuery API 문서를 참고하지 않더라도, 국내에 jQuery에 대한 책도 많이 출간됐고 많은 분들이 블로그나 카페에 관련 팁을 공유해주셔서, 쉽게 jQuery를 익힐 수 있습니다. 이 글이 아직 jQuery를 어려워하는 웹 디자이너나 처음 웹 사이트를 만드는 분들에게 도움이 됐으면 합니다. 완성된 2단 메뉴(GNB)를 먼저 확인해주세요.

jQuery로 2단 메뉴 따라하기

본론으로 바로 들어가서, HTML 코드를 작성합니다.

<div id="header"> <!-- 상단 박스를 만들고 -->
<div id="nav"> <!-- 가로형 2단 메뉴바를 ul x ul 형태로 만듭니다. -->
  <ul>
    <li class="on"> <!-- 첫번째 1단 메뉴를 활성화 합니다. -->
      <a href="/">처음</a>
      <ul>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">갤러리</a>
      <ul>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">블로그</a>
      <ul>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">등록</a>
      <ul>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">소개</a>
      <ul>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">포럼</a>
      <ul>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
        <li>
          <a href="#">메뉴</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
</div>

다음으로, 스타일을 부여하기 위해 CSS 코드를 추가합니다.

/* global */
body {
	margin:0;
	padding:0;
	font: 12px/1.2 "돋움", dotum, sans-serif;
	background:#666;
}
/* header */
#header {
	width:800px;
	height:150px;
	margin:50px auto;
	background:#000;
	position:relative; /* 포지션의 기준점을 잡습니다. */
}
#nav {
	position:absolute; /* header를 기준으로 하단에 위치시킵니다. */
	left: 0;
	bottom:0;
}
#nav ul, #nav li {
	margin:0;
	padding:0;
}
#nav li {
	position:relative;
	list-style:none;
	float:left;
	margin-right:5px;
}
#nav a {
	display:block;
	padding: 1em 2em;
	font-weight:bold;
	text-decoration:none;
}
#nav li ul {
	position:absolute;
	top:3.5em;
	width: 300px;
	display:none; /* li의 자식인 ul을 숨겨둡니다. */
}
#nav li.on ul {
	display:block; /* 활성화된 li의 자식인 ul만 보여줍니다. */
}
/* color */
#header {background:#000;}
#nav a {background:#fff; color:#000;}
#nav .on a,
#nav li li a {background:#390; color:#fff;}

마지막으로, 2단 메뉴로 동작하기 위해 JavaScript(jQuery) 코드를 추가합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  // Google CDN의 jQuery를 불러옵니다.
<script>
$('#nav li').bind('mouseenter keyup', function() { // 메뉴바의 각 메뉴들에 마우스를 올리거나 키보드로 이동하면,
	$(this).addClass('on').siblings().removeClass(); // 해당 메뉴에 클래스 on을 추가하고, 다른 메뉴의 클래스를 제거합니다.
}); // 네. 3줄로 끝입니다.
</script>

완성된 2단 메뉴(GNB)를 확인해주세요. 이 코드는 IE8, IE Tester를 이용한 IE7, windows XP mode를 이용한 IE6, Firefox 3.6, Chrome 9에서 테스트했습니다.

jQuery의 매력에 빠져보실 분에겐 실전 jQuery 쿡북(요리책)을 추천합니다. 비싼만큼, 도움이 될 것입니다. :)



13개의 의견이 있습니다. | 당신의 의견을 바랍니다.

  1. 1. Gravatar 뽀뽀 | 2011.01.04 , 오전 09:27 · permallink

    우왕 미라클! 제이쿼리는 웨케 짧아욤? 으하항 신기해욤!

  2. 2. Gravatar Hooney | 2011.01.04 , 오전 10:37 · permallink

    @현선님: 오직 2단 메뉴 구현하데 jQuery를 사용하는 건 에러같아요. 좀 더 여러군데 쓰면 모를까;;

    jQuery를 사용하지 않아도 JavaScript로 2단 메뉴 구현하는 코드도 별로 안길듯 싶어요~

  3. 3. Gravatar 신현석 | 2011.01.04 , 오전 11:41 · permallink

    오, 3줄!

  4. 4. Gravatar Hooney | 2011.01.04 , 오후 01:52 · permallink

    @신현석: hover와 active/focus 이벤트를 사용할 수 없어서, mouseenter keyup 이벤트 바인딩을 처음 사용했어요. 아무래도 기준이 되는 요소를 “#nav > li”로 잡느냐, “#nav > li > a”로 잡느냐에 따라 사용할 수 있는 이벤트가 제한이 있는 듯 싶습니다. ㅎㅎ

  5. 5. Gravatar 조현진 | 2011.01.05 , 오전 11:22 · permallink

    간만에 하신 포스팅인데,
    간단 명료해서 좋네요.

    술 사주세요 ㅋ

  6. 6. Gravatar Hooney | 2011.01.05 , 오후 01:17 · permallink

    @조현진: 올해 계획은 블로그 포스팅을 많이 하려구요~ 1주에 2번이상, 1달에 10개 이상 써보려구요.

    대형 회사에 근무하시는 팀장님이, 일개 소형 회사에 근무하는 사람에게 술을 사주라고 하다니… 현진님이 사세요~ ㅋㅋ

  7. 7. Gravatar Tweets that mention Hooney / jQuery로 2단 메뉴 구현, 따라하기 -- Topsy.com | 2011.01.10 , 오전 08:56 · permallink

    [...] This post was mentioned on Twitter by 서광호. 서광호 said: RT @jangkunblog: Hooney / jQuery로 2단 메뉴 구현, 따라하기 http://bit.ly/dYQ9xQ [...]

  8. 8. Gravatar 데칼 | 2011.07.04 , 오전 10:35 · permallink

    아주 재미있게 퍼갑니다…
    좋은 자료 감사합니다.

  9. 9. Gravatar jjae | 2012.07.10 , 오전 11:39 · permallink

    정말 짱이네요!!
    앞으로 올라올 포스팅들도 기대하겠습니다.!!

  10. 10. Gravatar 저도후니 | 2012.07.10 , 오후 08:00 · permallink

    http://hooney.net/files/test/jqueryNav.html

    위 파일 소스 중에 스크립트 부분의 위치를 변경하면 작동을 안하네요.
    안에 넣어 봤는데 작동을 안하네요. 왜 그럴까요?

  11. 11. Gravatar inhyeok_ | 2014.01.11 , 오후 10:58 · permallink

    저가 잘 못 복사를 한건지 스크립이 안먹는데요??

  12. 12. Gravatar guest | 2014.02.27 , 오전 11:53 · permallink

    유용한 정보 감사합니다 :)

  13. 13. Gravatar 잘가져가겠습니다 | 2014.07.18 , 오후 11:33 · permallink

    감사합니다 삶에 충만함이 있으시길

당신의 의견을 바랍니다..

사용할 수 있는 HTML 태그 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Aboout Author

조훈 Hooney라는 ID로 온라인에서 활동하는 조훈입니다.
자세히 보기 »

CSS Reference

Hooney와 함께 만드는 CSS Reference!


Be Friend~! Be Friend~!