탭메뉴는 어떻게 코딩 해야 할까?

우선 먼저 말하고 싶은것은 내가 적은 방법이 정답은 아니다.
정수 ‘2’ 라는 값을 만들기 위해서

  • 1+1
  • 2/8*((16-4)/3)*2
  • sin 5/6 pi * 4

같은 많은 식들이 존재하듯이, 아래에 나온 방법도 그중 하나 일 뿐이다.

별 내용없는 두서는 이제 접기로 하고…

  • semantic markup
  • CSS가 없을때도 제대로 보이도록
  • Javascript가 동작하지 않을때도 동작하도록

위의 사항들을 고려하며 코딩되었다.

<menu id=”tab_menus”>
<li><a href=”#Menu_01″>Menu 01</a></li>
<li><a href=”#Menu_02″>Menu 02</a></li>
<li><a href=”#Menu_03″>Menu 03</a></li>
</menu>
<div></div>

<div id=”Menu_01″>
<h3>Menu 01</h3>
<p>Menu 01…blablablablabla</p>
<a href=”#tab_menus”><img src=”btn_top.gif” alt=”go tab menu” /></a>
</div>
<div id=”Menu_02″>
<h3>Menu 02</h3>
<p>Menu 02…blablablablabla</p>
<a href=”#tab_menus”><img src=”btn_top.gif” alt=”go tab menu” /></a>
</div>
<div id=”Menu_03″>
<h3>Menu 03</h3>
<p>Menu 03…blablablablabla</p>
<a href=”#tab_menus”><img src=”btn_top.gif” alt=”go tab menu” /></a>
</div>

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_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;
color:#ff4800;
}

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’);

contents[i].setStyle(‘display’, ‘block’);
quick_link.addClass(‘selected’);
selected_menu = i;
});
});

#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

압축파일(html, js, images)

 tab-menu.zip

ps > 이거 스크롤의 압박이;;

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중