'tabindex' 태그의 글 목록

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

'tabindex'에 해당되는 글 1건

2011.08.31 2단메뉴 tabindex 문제

2단메뉴 tabindex 문제

Tip 2011. 8. 31. 01:13 |

플래쉬 애니메이션을 스크립트로 대체하는 작업을 하던 중, gnb 메뉴에 tab키를 이용한 키보드 접근성 관련 문제가 발생했다.
tab키를 누를 때 순차적으로 gnb서브메뉴까지 자동으로 보여지게 해야되는데 gnb와 gnb sub가 분리되어있는 코딩이라 난감스...

첨엔 tabindex를 이용하면 간단히 해결될거라 생각했는데 역시 꼼수는 당면한 문제에 대한 근본적인 해결책이 될 수 없다는 것을 다시금 느끼게 해줬다.

이래저래 잔머리 굴리다 기본으로 돌아가 tabindex 따위 개나 줘버리고 자연스레 순차적인 탐색이 가능하도록 코딩을 뜯어 고치자! 라고 했는데.. 코딩해준 댈님이 자나보다ㅠㅠ

어쩔 수 없이 구글링 통해서 2단메뉴 코딩 샘플 구해서 지지고 볶았더니 자정이 넘어버렸다.
2단메뉴 구성시 tab키 이슈에 대한 스킬업이 되었다.

<문제의 메뉴>

<before>
========================================================================================

<li title="LOVE FACTORY 소개"><a href="/introduce/introduce.asp"><span class="menu1" style="cursor:pointer;"><h4>LOVE FACTORY 소개</h4></span></a></li>

<li title="LOVE SPORTS & CULTURE"><a href="/sports/sports.asp"><span class="menu2" style="cursor:pointer;"><h4>LOVE SPORTS & CULTURE</h4></span></a></li>

<li title="LOVE DONATION"><a href="/donation/donation.asp"><span class="menu3" style="cursor:pointer;"><h4>LOVE DONATION</h4></span></a></li>

<li title="LOVE FACTORY 봉사단"><a href="/service/service.asp"><span class="menu4" style="cursor:pointer;"><h4>LOVE FACTORY 봉사단</h4></span></a></li>

</ul>

</ul>

</ul>

</ul>

</ul>

</div>

========================================================================================

<after>
========================================================================================

<li><a class="topgnb" href="/introduce/introduce.asp"><span idx="1" class="menu1" style="cursor:pointer;"><h4>LOVE FACTORY 소개</h4></span></a>

</ul>

</li>

<li><a class="topgnb" href="/sports/sports.asp"><span idx="2" class="menu2" style="cursor:pointer;"><h4>LOVE SPORTS & CULTURE</h4></span></a>

</ul>

</li>

<li><a class="topgnb" href="/donation/donation.asp"><span idx="3" class="menu3" style="cursor:pointer;"><h4>LOVE DONATION</h4></span></a>

</ul>

</li>

<li><a class="topgnb" href="/service/service.asp"><span idx="4" class="menu4" style="cursor:pointer;"><h4>LOVE FACTORY 봉사단</h4></span></a>

</ul>

</li>

</ul>

</div>

========================================================================================
script
========================================================================================

$('#nav li a.topgnb')

.bind('mouseenter keyup', function() {

$(this).parent().addClass('on').siblings().removeClass();

var $spanChild = $("ul.gnb_menu2 span");

$spanChild.each(function(idx){

$(this).removeClass("menuon_1").removeClass("menuon_2").removeClass("menuon_3").removeClass("menuon_4");

});

var $child = $(this).find("span:first");

var className = "menuon_" + $child.attr('idx');

$child.addClass(className);

$child.hide().fadeIn('fast');

})

;
========================================================================================
css
========================================================================================

#gnb_header {

clear:both;

width:792px; height:59px;

position:relative;

}

#nav {

position:absolute;

left: 0;

top:0;

}

#nav ul, #nav li {

margin:0;

padding:0;

}

#nav li {

position:relative;

list-style:none;

float:left;

}

#nav a {

display:block;

font-weight:bold;

text-decoration:none;

}

#nav li ul {

position:absolute;

width: 800px;

display:none;

}

#nav li.on ul {

display:block;

}

#nav ul.gnb_menu2{width:792px; height:59px; background:url('../images/new/gnb_menu.gif') no-repeat 0 0; text-align:left;}

#nav span {display:inline-block; height:28px; font-size:0px;}

#nav span h4 {display:none; font-size:0px;}

#nav span.menu1 {width:195px;}

#nav span.menu2 {width:209px;}

#nav span.menu3 {width:193px;}

#nav span.menu4 {width:195px;}

#nav span.menuon_1 {width:195px; background:url('../images/new/gnb_menu1_on.gif') no-repeat 0 0;}

#nav span.menuon_2 {width:209px; background:url('../images/new/gnb_menu2_on.gif') no-repeat 0 0;}

#nav span.menuon_3 {width:193px; background:url('../images/new/gnb_menu3_on.gif') no-repeat 0 0;}

#nav span.menuon_4 {width:195px; background:url('../images/new/gnb_menu4_on.gif') no-repeat 0 0;}

#nav ul.sub1 {margin-left:38px;}

#nav ul.sub2 {margin-left:38px;}

#nav ul.sub3 {margin-left:-140px;}

#nav ul.sub4 {margin-left:-140px;}

#nav .submn li {float:left; margin-right:42px; padding-top:10px;}

#nav .submn li.last {margin-right:0px;}

#nav .submn li img {display:block;}

저작자표시

'Tip' 카테고리의 다른 글

브라우저 캐쉬 경로 변경 (0)	2012.01.28
jstree ie8 깨짐 (0)	2011.12.13
emma 한글 깨짐 (0)	2011.07.01
IE8 Textarea Bug (0)	2011.06.20
IE9 스마트 에디터 상단 짤림 (2)	2011.05.31

Posted by 기계식키보드

PREV 1 NEXT

Notice

Category

Tags

Recent Posts

Recent Comments

Archives

Links

'tabindex'에 해당되는 글 1건

2단메뉴 tabindex 문제

'Tip' 카테고리의 다른 글

티스토리툴바