in 웹 접근성, 코드

JQuery를 이용한 겸손한 탭 메뉴 구현

이번에 사이트를 개편하면서, 탭 메뉴로 구성된 추천 글 목록을 추가했습니다. 제 사이트의 방문자 통계를 확인하니, 방문자들의 이동 경로가 1개의 글만 읽고 사이트를 떠나거나, 홈페이지로 이동하는 등 무척 기초적인 수준의 이용만 하고 있다는 것을 확인했기 때문입니다. 블로그의 글이 360개임에도 불구하고 1~2개 글만 보고 떠나는 걸 방치할 수 없었기에 추가한 콘텐츠입니다.

웹 사이트에서 탭 메뉴를 구현하기 위한 일반적인 방법은 Javascript의 onClick 이벤트를 이용하여, style의 display 속성을 조정하는 것입니다. 이때 보통은 HTML a 태그에 Javascript를 직접 사용하는 방식을 이용합니다. 때문에 이 방법은 구조적인 HTML 마크업과 거리가 멀이질 수 밖에 없죠. 즉, 웹 표준에 어긋난는 방법입니다. 또한 마우스를 사용하지 못하기 때문에 onClick 이벤트를 발생시킬 수 없는 시각장애인의 경우 해당 컨텐츠에 접근하기도 어렵습니다.

제 사이트는 Javascript library로 JQuery를 사용하고 있습니다. JQuery는 파이어폭스나 워드프레스와 비슷한 점이 많습니다 . 예전에 몇몇 글에서 밝혔듯이, 무척 작고 효율적이며, 다양한 기능 외에도 플러그인이 많은 라이브러리죠. 특히 JQuery의 $(document).ready는 DOM의 고질적인 문제인 브라우저의 늦은 랜더링을 해결할 수 있답니다.

탭 메뉴에 해당하는 콘텐츠 구성

저는 사이트 방문객이 좀 더 머무르면서 다양한 콘텐츠에 접근할 수 있는 기회를 제공하기 위해서, 탭 메뉴로 구성된 콘텐츠를 제공하고 싶었습니다.

겸손한 탭 메뉴 구현

HTML로 콘텐츠 구조화

탭 메뉴를 책의 목차(Table Of Contents) 형식으로 구성했습니다. 현재의 HTML과 XHTML 스펙에서 가장 구조적인 방법이죠. 물론 앞으로 HTML 5가 채택되어 nav 요소를 사용할 수 있기 전까지 입니다.



CSS로 콘텐츠 시각화

CSS를 이용하여 콘텐츠를 시각적으로 표현했습니다. float 속성을 사용하여 탭 메뉴를 가로로 배치한 점 외에는 특별히 고급 기술을 사용하지 않았습니다. IE가 비순차적 목록(ol)의 상단 마진를 다르게 출력하는 버그 때문에, 2줄의 CSS가 추가됐습니다.

body {
	margin:0; padding:0;
	font: .75em/1.5 "AppleGothic", "Malgun Gothic", dotum, sans-serif;
}
a { color:#369; font-weight:bold;}
#readMore02 {
	position:absolute; top:50%; left:50%;
	width:350px;
	margin:-120px 0 0 -180px;
	border:1px solid #ccc;
}
#readMore02 h2,
#readMore02 h3 { display:none; }
#readMore02 ul {
	margin:0; padding:5px 0 0 2px;
	height:26px;
	border-bottom:1px solid #ccc;
	background:#eee;
}
#readMore02 ul li {
	list-style:none;
	float:left;
	margin:0 0 0 3px; padding:0;
	position:relative; top:1px;
}
#readMore02 ul li a {
	display:block;
	padding:.25em .75em;
	border:1px solid #ccc;
	line-height:1.5; text-decoration:none;
	background:#aaa; color:#fff;
}
#readMore02 ul li a:hover,
#readMore02 ul li a:focus,
#readMore02 ul li.tabs-selected a {
	border-bottom:1px solid #fff;
	background:#fff; color:#f60;
}
#readMore02 div {clear:left;padding-top:1em;} /* IE6 마진 버그 */
#readMore02 div.tabs-selected { display:block; }
#readMore02 div.tabs-hide { display:none; }
#readMore02 ol { margin-top:0; } /* IE6 마진 버그 */
#readMore02 ol li { line-height:2; }

JQuery로 콘텐츠 동적 구현

JQuery와 tabs 플러그인을 이용하여 탭 메뉴를 동적으로 구현했습니다. 플러그인에서 지원하는 페이드 효과를 이용하니 훨씬 보기 좋은 탭 메뉴가 구현됐습니다.



이 글이 저처럼 블로그에 많은 글을 작성했음에도 불구하고, 예전에 작성한 글이 방문객에게 좀처럼 노출되지 않는 문제로 고민하던 분들에게 도움이 됐으면 좋겠니다. 🙂

댓글 남기기

14 Comments

  1. 신현석, 지기지, 기다림, 황규연님 : 제게 필요한 부분에 사용할 수 있을 정도로만 익혀보려구요~ 나중에 기회가 되면 ActionScript 만큼 부드러운 이펙트에 도전해보고도 싶구요! 🙂

  2. 청이: 링크가 꺠져있었네요. 다시 복원했습니다.
    도움이 되길 바랍니다. 감사합니다.

    소스는 테스트 URL에서 다운받으실 수 있습니다. 🙂

Webmentions

  • VANITY 의 다양한 툴셋 – jQuery — Jibro : 1+1=1, 7+1=8 2012년 11월 16일

    […] – /2007/08/20/431/ […]

  • Hooney / jQuery로 2단 메뉴 2012년 11월 16일

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