탭포커싱이 용이한 마우스오버 메뉴 제이쿼리 (동시에 두 가지 이벤트 사용)

1 html

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

<ul id="gnb">     <li>         <a href="">Menu1</a>         <ul>             <li><a href="">Menu1-1</a></li>             <li><a href="">Menu1-2</a></li>             <li><a href="">Menu1-3</a></li>         </ul>     </li>     <li>         <a href="">Menu2</a>         <ul>             <li><a href="">Menu2-1</a></li>             <li><a href="">Menu2-2</a></li>         </ul>     </li>     <li>         <a href="">Menu3</a>         <ul>             <li><a href="">Menu3-1</a></li>             <li><a href="">Menu3-2</a></li>             <li><a href="">Menu3-3</a></li>             <li><a href="">Menu3-4</a></li>         </ul>     </li> </ul>

2 css

1 2 3 4 5 6 7

#gnb {width:250px; background:#ccc;} #gnb > li {display:inline-block;} #gnb > li > a {display:block; line-height:25px; width:80px; text-align:center;} #gnb > li.on a {background:#777; color:#fff;} #gnb li ul {position:absolute; width:80px; background:#777; top:-99999px;} #gnb li.on ul {top:auto;} #gnb li ul li a {margin:3px 0 3px 10px; color:#fff;}

3 Jquery

1 2 3 4 5 6 7

$("#gnb_test > li").bind("mouseenter focusin", function() {     $(this).addClass("on");     $(this).siblings().removeClass("on"); }); $("#gnb_test > li").bind("mouseleave focusout", function() {     $(this).removeClass("on"); });

4 결과

• Menu1
  • Menu1-1
  • Menu1-2
  • Menu1-3
• Menu2
  • Menu2-1
  • Menu2-2
• Menu3
  • Menu3-1
  • Menu3-2
  • Menu3-3
  • Menu3-4

하위메뉴가 보이지 않을 때에도 스크린리더기로 내용을 순서에 맞게 읽어들일 수 있고,
논리적 순서대로 탭 포커싱이 가능하다. (웹 접근성 준수)