“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 코드를 작성합니다.

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

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

$(‘#nav li’).bind(‘mouseenter keyup’, function() { // 메뉴바의 각 메뉴들에 마우스를 올리거나 키보드로 이동하면,
$(this).addClass(‘on’).siblings().removeClass(); // 해당 메뉴에 클래스 on을 추가하고, 다른 메뉴의 클래스를 제거합니다.
}); // 네. 3줄로 끝입니다.

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

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