웹접근성 gnb메뉴

키보드 tap키로도 하위 뎁스영역까지 포커스가 되어야 웹접근성에 어긋나지 않는다.

/* gnb */
$(function(){
var gnb = $('.gnb'); // nav태그 클래스값입력
gnb.find('>ul>li>a')
  .on('mouseenter',function(e){
    e.preventDefault();
    gnb
      .find('>ul>li>.gnb_list2:visible') // 2뎁스 클래스명
      .hide()
      .parent('li')
      .removeClass('on'); // css에서 on이라는 클래스값을 입력
    $(this)
      .next('.gnb_list2:hidden') // 2뎁스 클래스명
      .show()
      .parent('li')
      .addClass('on');
  })
  .focus(function(){
    $(this).mouseover();
  })
  .end()
  .mouseleave(function(){
    gnb
      .find('>ul>li>.gnb_list2') // 2뎁스 클래스명
      .hide()
      .prev('a')
      .parent()
      .siblings()
      .removeClass('on');
  })
    .find('li').last().find('.snb-tit2').focusout(function(){ // 마지막 gnb 2차메뉴에서 마우스를 벗어나을때 사라진다.
          $(this).mouseleave();
      });
});