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

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

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

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

 
<문제의 메뉴>

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

<ul class="gnb_menu">

<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>

<div class="gnb_menu_sub">

<ul class="sub1" style="display:none;">

<li><a href="/introduce/introduce.asp" title="Love Factory 소개"><img src="/data_files/images/new/gnb_menu1_1_off.gif" class="gif24" alt="Love Factory 소개" /></a></li>

<li><a href="/introduce/news.asp" title="Love Factory 소식"><img src="/data_files/images/new/gnb_menu1_2_off.gif" class="gif24" alt="Love Factory 소식" /></a></li>

</ul>

<ul class="sub2" style="display:none;">

<li><a href="/sports/baseball.asp" title="사랑의 10번 타자"><img src="/data_files/images/new/gnb_menu2_1_off.gif" class="gif24" alt="사랑의 10번 타자" /></a></li>

<li><a href="/sports/ticket.asp" title="유니세프 Love Ticket"><img src="/data_files/images/new/gnb_menu2_2_off.gif" class="gif24" alt="유니세프 Love Ticket" /></a></li>

<li><a href="/sports/golf.asp" title="지적 장애인 골프단 후원"><img src="/data_files/images/new/gnb_menu2_3_off.gif" class="gif24" alt="지적 장애인 골프단 후원" /></a></li>

</ul>

<ul class="sub3" style="display:none;">

<li><a href="http://www.lottecard.co.kr/hub.jsp?URL=/pers/point/IHDN001NO.ftl" title="롯데포인트 기부" target="_blank"><img src="/data_files/images/new/gnb_menu3_1_off.gif" class="gif24" alt="롯데포인트 기부" /></a></li>

<li><a href="/donation/realtime.asp" title="기부액 현황"><img src="/data_files/images/new/gnb_menu3_2_off.gif" class="gif24" alt="기부액 현황" /></a></li>

<li><a href="/donation/pay.asp" title="급여우수리 모금"><img src="/data_files/images/new/gnb_menu3_3_off.gif" class="gif24" alt="급여우수리 모금" /></a></li>

<li><a href="/donation/pc.asp" title="사랑의 PC기증"><img src="/data_files/images/new/gnb_menu3_4_off.gif" class="gif24" alt="사랑의 PC기증" /></a></li>

<li class="last"><a href="/donation/card.asp" title="기부 전용 카드"><img src="/data_files/images/new/gnb_menu3_5_off.gif" class="gif24" alt="기부 전용 카드" /></a></li>

</ul>

<ul class="sub4" style="display:none;">

<li><a href="/service/activity.asp" title="임직원 봉사단 활동"><img src="/data_files/images/new/gnb_menu4_1_off.gif" class="gif24" alt="임직원 봉사단 활동" /></a></li>

<li><a href="/service/call.asp" title="홀몸노인 안심콜"><img src="/data_files/images/new/gnb_menu4_2_off.gif" class="gif24" alt="홀몸노인 안심콜" /></a></li>

<li class="last"><a href="/service/education.asp" title="청소년 금융 교육"><img src="/data_files/images/new/gnb_menu4_3_off.gif" class="gif24" alt="청소년 금융 교육" /></a></li>

</ul>

</div>
 
======================================================================================== 

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

<div id="gnb_header">

 <div id="nav">

<ul class="gnb_menu2">

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

<ul class="submn sub1">

<li><a href="/introduce/introduce.asp" title="Love Factory 소개"><img src="/data_files/images/new/gnb_menu1_1_off.gif" class="gif24" alt="Love Factory 소개" /></a></li>

<li><a href="/introduce/news.asp" title="Love Factory 소식"><img src="/data_files/images/new/gnb_menu1_2_off.gif" class="gif24" alt="Love Factory 소식" /></a></li>

</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 class="submn sub2">

<li><a href="/sports/baseball.asp" title="사랑의 10번 타자"><img src="/data_files/images/new/gnb_menu2_1_off.gif" class="gif24" alt="사랑의 10번 타자" /></a></li>

<li><a href="/sports/ticket.asp" title="유니세프 Love Ticket"><img src="/data_files/images/new/gnb_menu2_2_off.gif" class="gif24" alt="유니세프 Love Ticket" /></a></li>

<li><a href="/sports/golf.asp" title="지적 장애인 골프단 후원"><img src="/data_files/images/new/gnb_menu2_3_off.gif" class="gif24" alt="지적 장애인 골프단 후원" /></a></li>

</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 class="submn sub3">

<li><a href="http://www.lottecard.co.kr/hub.jsp?URL=/pers/point/IHDN001NO.ftl" title="롯데포인트 기부" target="_blank"><img src="/data_files/images/new/gnb_menu3_1_off.gif" class="gif24" alt="롯데포인트 기부" /></a></li>

<li><a href="/donation/realtime.asp" title="기부액 현황"><img src="/data_files/images/new/gnb_menu3_2_off.gif" class="gif24" alt="기부액 현황" /></a></li>

<li><a href="/donation/pay.asp" title="급여우수리 모금"><img src="/data_files/images/new/gnb_menu3_3_off.gif" class="gif24" alt="급여우수리 모금" /></a></li>

<li><a href="/donation/pc.asp" title="사랑의 PC기증"><img src="/data_files/images/new/gnb_menu3_4_off.gif" class="gif24" alt="사랑의 PC기증" /></a></li>

<li class="last"><a href="/donation/card.asp" title="기부 전용 카드"><img src="/data_files/images/new/gnb_menu3_5_off.gif" class="gif24" alt="기부 전용 카드" /></a></li>

</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 class="submn sub4">

<li><a href="/service/activity.asp" title="임직원 봉사단 활동"><img src="/data_files/images/new/gnb_menu4_1_off.gif" class="gif24" alt="임직원 봉사단 활동" /></a></li>

<li><a href="/service/call.asp" title="홀몸노인 안심콜"><img src="/data_files/images/new/gnb_menu4_2_off.gif" class="gif24" alt="홀몸노인 안심콜" /></a></li>

<li class="last"><a href="/service/education.asp" title="청소년 금융 교육"><img src="/data_files/images/new/gnb_menu4_3_off.gif" class="gif24" alt="청소년 금융 교육" /></a></li>

</ul>

 </li>

</ul>

 </div>

</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;}