in 코드

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 쿡북(요리책)을 추천합니다. 비싼만큼, 도움이 될 것입니다. :)

댓글 남기기

11 Comments

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

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

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

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

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