tab menu 의 링크를 각각의 content에 걸어줌으로 인해 quick link의 역활을 수행하여 접근성을 높였고, 각 content 하단에 tab menu로 바로 가는 quick link도 제공함으로 더욱 완성도 높은 접근성이 보장되었다. 하지만 이렇게 보면 전혀 tab menu같지가 않다.
이제는 tab menu스럽게 꾸며보자.
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 { margin-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; } #tab_menus li.selected a { border-bottom:0 solid white; background:white url("blt_arrowdown.gif") no-repeat center bottom; color:black; }
tab menu의 a를 block으로 잡고 hover를 주어 onMouse상태일때 Javascript없이도 변화를 줄 수 있게 하였다. #Menu_02, #Menu_03에 display:none을 안 준 것을 궁금해 하는 독자가 있다면, 당신은 천재! Javascript없이도 모든 content의 접근성을 보장하기 위해서다. 이건 조금 후 다시 설명하기로 하고..
자 이제는 마무리. Javascript로 tab menu 동작을 만들자. mootools 1.11(Element.Event, Element.Selectors)을 이용하였다
var selected_menu = 0;
var menus = $$('#tab_menus li'); var contents = $$('div.content'); contents.each(function(div, i) { if (i != 0) { div.setStyle('display', 'none'); } })
menus.each(function(quick_link, i) { quick_link.getElement("a").blur(); quick_link.addEvent('click', function(event) { e = new Event(event).stop(); contents[selected_menu].setStyle('display', 'none'); menus[selected_menu].removeClass('selected');
#Menu_01을 제외한 다른 content들은 가려주었고, tab menu의 박스에 click 이벤트를 걸어줌으로써 toggle 기능이 완성이 되었다. 만약 content들을 CSS에서 가려주었다면(#Menu_02, #Menu_03 display:none) CSS는 render가 되었는데 Javascript가 동작이 안되는 상황이 오면 다른 content에 접근할 방법이 없어진다. Javascript로 원하는 content를 display:block으로 바꿔줘야 하는데 Javascript가 동작이 안되니 tab을 백날눌러도 그 tab의 content는 볼 수 가 없게 되는 것이다.
결론. 결국은 content는 CSS와 Javascipt에 영향을 받지 않게 설계,코딩 되어야 하고 더불어 semantic하게 markup되어야 한다는 것이다.
다운로드 미리보기 (링크걸리는줄 알았는데 그게 아니네요. 아..이럴때 개인서버가 살아있었다면..)
tab-menu.html
tab-menu.zip
