2단메뉴 tabindex 문제

Tip

2단메뉴 tabindex 문제

기계식키보드 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;}

저작자표시