우선 먼저 말하고 싶은것은 내가 적은 방법이 정답은 아니다.
정수 '2' 라는 값을 만들기 위해서
별 내용없는 두서는 이제 접기로 하고...
tab menu 의 링크를 각각의 content에 걸어줌으로 인해 quick link의 역활을 수행하여 접근성을 높였고, 각 content 하단에 tab menu로 바로 가는 quick link도 제공함으로 더욱 완성도 높은 접근성이 보장되었다. 하지만 이렇게 보면 전혀 tab menu같지가 않다.
이제는 tab menu스럽게 꾸며보자.
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)을 이용하였다
#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되어야 한다는 것이다.
다운로드
미리보기 (링크걸리는줄 알았는데 그게 아니네요. 아..이럴때 개인서버가 살아있었다면..)
압축파일(html, js, images)
ps > 이거 스크롤의 압박이;;
정수 '2' 라는 값을 만들기 위해서
- 1+1
- 2/8*((16-4)/3)*2
- sin 5/6 pi * 4
별 내용없는 두서는 이제 접기로 하고...
- semantic markup
- CSS가 없을때도 제대로 보이도록
- Javascript가 동작하지 않을때도 동작하도록
<menu id="tab_menus">
<li class="selected"><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 class="tab_right"></div>
<div id="Menu_01" class="content">
<h3>Menu 01</h3>
<p>Menu 01...blablablablabla</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>Menu 02</h3>
<p>Menu 02...blablablablabla</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>Menu 03</h3>
<p>Menu 03...blablablablabla</p>
<a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<li class="selected"><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 class="tab_right"></div>
<div id="Menu_01" class="content">
<h3>Menu 01</h3>
<p>Menu 01...blablablablabla</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>Menu 02</h3>
<p>Menu 02...blablablablabla</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>Menu 03</h3>
<p>Menu 03...blablablablabla</p>
<a href="#tab_menus" class="go_tab_menu"><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;
}
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;
});
});
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.zipps > 이거 스크롤의 압박이;;
'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글
| CSS Editors Reviewed (0) | 2008/06/25 |
|---|---|
| 코딩 하기 전 에 문서부터 디자인을 하라 (2) | 2008/03/19 |
| 탭메뉴는 어떻게 코딩 해야 할까? (4) | 2008/03/06 |
| IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때) (0) | 2008/02/04 |
| IE6 에서 print 했는데 글씨가 겹쳐서 나올때 (0) | 2008/02/01 |
| mac profile (0) | 2008/01/31 |
댓글을 달아 주세요
좋은 소스 잘 봤습니다...
2008/04/11 18:02 [ ADDR : EDIT/ DEL : REPLY ]클래스로 하면 한 페이지에 복수의 탭메뉴를 구성하는데 더 용이할 것 같습니다.
감사합니다
2008/04/12 11:43 [ ADDR : EDIT/ DEL ]복수의 탭메뉴를 구성할때 말씀하신대로 class를 부여해서 하는것도 좋은 방법이죠! ㅎㅎ
소스 다운받았어요ㅋㅋ 탭 코딩해야되는데 참고해야겠어요ㅋ
2009/01/15 17:33 [ ADDR : EDIT/ DEL : REPLY ]감사합니다~
어후 감사합니다.
2011/01/31 02:25 [ ADDR : EDIT/ DEL : REPLY ]제가 진행하는 일게 도움이 될꺼 같아요!!!