플래쉬 애니메이션을 스크립트로 대체하는 작업을 하던 중, 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;}