3.4 Javascript 대체 기법
3.4.3 탭 메뉴의 대체
아래 예제는 가로 탭 메뉴로써, JavaScript 기능이 동작하는 환경에서는 선택된 탭 메뉴에 해당하는 하위 목록을 보여준다. 그러나 JavaScript를 지원하지 않는 브라우저에서는 모든 탭 메뉴의 하위 목록을 화면에 보여준다. 아래 예제는 JavaScript를 지원하는 브라우저의 화면 모습으로 탭 메뉴 중 ‘Menu 03’이 선택된 상태를 보여주고 있다.
[그림] 기능이 동작하는 환경에서 탭 메뉴의 화면
주 메뉴 간의 이동은 Tab 키를 이용할 수 있다. 즉 Tab 키를 연속해서 누르면, ‘Menu 01’, ‘Menu 02’, ‘Menu 03’의 순서로 이동하고, 다시 Tab 키를 누르면 아래의 ‘Top’ 버튼으로 초점이 이동한다.
주 메뉴에 초점이 주어졌을 때 Enter 키를 누르면 해당 탭 메뉴의 하위 목록이 펼쳐진다. 이어서 Tab 키를 누르면 다음 주 메뉴로 이동한다.
마지막 주 메뉴로 이동한 후에는 화면에 보인 탭 메뉴의 마지막 부분에 있는 ‘Top’ 버튼으로 초점이 이동하며, 버튼을 클릭(Enter 키를 누르면)하면 다시 첫 번째 탭 메뉴로 이동한다.
화면 낭독 프로그램이 실행되어도 초점이 이동함에 따라 그 내용을 읽어주어야 한다.
만일 브라우저가 JavaScript를 지원하지 않을 경우에는 다음 아래 두개의 예제와 같이, 모든 하위 메뉴가 화면에 순서대로 나타나게 된다.
이때 Tab 키를 누르면, 초점이 주 메뉴인 ‘Menu 01’, ‘Menu 02’, ‘Menu 03’의 순서로 이동하고, 다시 Tab 키를 누르면 아래의 첫 번째 ‘Top’ 버튼으로부터 마지막 세 번째 버튼으로 초점이 순차적으로 이동한다.
주 메뉴에 초점이 주어졌을 때 Enter 키를 누르면 해당 탭 메뉴의 콘텐츠로 화면이 이동한다. 이어서 Tab 키를 누르면 해당 하위목록의 마지막에 있는 ‘Top' 버튼으로 초점이 이동한다. 여기서 버튼을 클릭(Enter 키를 누르면)하면 다시 첫 번째 탭 메뉴로 이동한다.
[그림] 바로가기링크를 활용한 탭 메뉴의 대체 예제
[그림] 헤딩을 탭메뉴로 활용한 탭 메뉴의 대체 예제
아래에 보인 코드 자체는 평이하므로 설명을 생략한다. JavaScript 부분을 삭제하거나 브라우저가 지원하지 않으면 CSS와 HTML 코드만으로도 동작한다.
우수 사례CSS 코드 부분
사례 코드
<style type="text/css" title="">
body{font:12px arial;}
a{text-decoration: none;}
img{border:0;}
/* tab menu */
#tab_menus {margin: 0; padding: 0; list-style: none;}
#tab_menus li{margein-bottom: 16px; float: left; padding: 0px;}
#tab_menus li a{padding: 8px 10px; color: #505050; border-width: 1px 0 1px 1px;
border-style: solid; border-color: #ae9f96; background-color:#eae4e0;
background-image: none; font-weight: bold; font-size: 0.9em; display: block;}
#tab_menus li a:hover {color:black; background-color:#c6b5aa;}
#tab_menus li.selected a{border-bottom:0 solid white; background: white
url("blt_arrowdown.gif") no-repeat center bottom; color: black;}
.tab_right {margin-bottom: 16px; border-width: 0 0 1px 1px; border-style: solid;
border-color: #ae9f96; width: 80px; height: 31px; float: left;}
/* content */
.content {clear:both; padding-left:10px;}
.content h3{margin:0; padding:0; font-size:1.2em;}
.content h3 a {color: #ff4800;}
</style>우수 사례스크립트 코드 부분
사례 코드
<script type="text/javascript">
<!--
var selected_menu = 0;
var content_count = 0;
var selected_class_name = "selected";
var menus=document.getElementById("tab_menus").getElementsByTagName("li");
var dives=document.getElementsByTagName("div");
var contents=new Array;
for(var i=0; i<dives.length; i++){
var div = dives[i];
if (div.className == "content"){
// Javascript를 이용하여 CSS초기화
if (selected_menu == content_count) {
div.style.display = "block";
menus[content_count].className += " " +selected_class_name;}
else{div.style.display = "none";
menus[content_count].className=menus[content_count]
.className.replace(selected_class_name, "");}
// -->
contents.push(div);
content_count++;} }
for(var i=0; i<menus.length; i++){
var quick_link = menus[i];
quick_link.content_index = i;
quick_link.onclick = quick_link.onkeypress = function(event) {
contents[selected_menu].style.display = "none";
menus[selected_menu].className
=menus[selected_menu].className.replace(selected_class_name, "");
contents[this.content_index].style.display = "block";
this.className += " " + selected_class_name;
selected_menu = this.content_index;
return false; } }
//-->
</script>우수 사례HTML 코드 부분
사례 코드
<body>
<menu id="tab_menus"><li><a href="#QuickMenu_01">Menu 01</a></li>
<li><a href="#QuickMenu_02">Menu 02</a></li>
<li><a href="#QuickMenu_03">Menu 03</a></li></menu>
<div class="tab_right"></div>
<div id="Menu_01" class="content">
<h3><a id="QuickMenu_01" href="#QuickMenu_01">Menu 01</a></h3>
<p> Menu 01...<br /> Menu 01...<br />
...
Menu 01...<br /> Menu 01...<br /></p>
<a href="#tab_menus" class="go_tab_menu">
<img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<div id="Menu_02" class="content">
<h3><a id="QuickMenu_02" href="#QuickMenu_02">Menu 02</a></h3>
<p>Menu 02...<br /> Menu 02...<br />
...
Menu 02...<br /> Menu 02...<br /></p>
<a href="#tab_menus" class="go_tab_menu">
<img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<div id="Menu_03" class="content">
<h3><a id="QuickMenu_03" href="#QuickMenu_03">Menu 03</a></h3>
<p>Menu 03...<br /> Menu 03...<br />
...
Menu 03...<br /> Menu 03...<br /></p>
<a href="#tab_menus" class="go_tab_menu">
<img src="btn_top.gif" alt="go tab menu" /></a>
</div>
</body>
