간단한 Top Menu 처리하기

// html 부분

<div id="gnb">
 <h2 class="invisible">군청 주요 메뉴</h2>
 <ul class="nav">
  <li>
   <a href="/uj_infoopen/info01.php" id="gnb_group01" title="정부3.0 정보공개 메뉴 펼침">정부3.0 정보공개</a>
   <div class="gnb_group01">
    <ul class="submenu01">
     <li class="gnb_title">정부3.0<br />정보공개</li>
     <li class="smenu_group01">
       <ul class="smenu01">
       <li><a href="#">정보공개제도 안내</a></li>
       <li><a href="#">청구절차 안내</a></li>
       <li><a href="#">사전정보공표</a></li>
       <li><a href="#">행정심판정보</a></li>
       <li><a href="#">정보목록</a></li>
       <li><a href="#">정보공개 담당자</a></li>
       <li><a href="#">정보공개 청구</a></li>
       <li><a href="#">감사결과 공개</a></li>
       <li><a href="#">공공데이터개방</a></li>
       <li><a href="#">정책실명제</a></li>
       </ul>
     </li>
    </ul>
    <p class="btn_gnbclose"><a href="#"><img src="/uj_images/btn_gnbclose.gif" alt="메뉴닫기" /></a></p>
   </div>
  </li>
  <li>
   <a href="/uj_elecappeal/appeal01.php" id="gnb_group02" title="열려있는 전자민원 메뉴 펼침">열려있는 전자민원</a>
   <div class="gnb_group02">
    <ul class="submenu02">
     <li class="gnb_title">열려있는<br />전자민원</li>
     <li class="smenu_group02">
      <ul class="smenu02">
       <li><a href="#">정보공개제도 안내</a></li>
       <li><a href="#">청구절차 안내</a></li>
       <li><a href="#">사전정보공표</a></li>
       <li><a href="#">행정심판정보</a></li>
       <li><a href="#">정보목록</a></li>
       <li><a href="#">정보공개 담당자</a></li>
       <li><a href="#">정보공개 청구</a></li>
       <li><a href="#">감사결과 공개</a></li>
       <li><a href="#">공공데이터개방</a></li>
       <li><a href="#">정책실명제</a></li>
       </ul>
     </li>       
    </ul>
    <p class="btn_gnbclose"><a href="#"><img src="/uj_images/btn_gnbclose.gif" alt="메뉴닫기" /></a></p>
   </div>
  </li>    
  <li class="menuF"><a href="http://tour.ulju.ulsan.kr/" target="_blank" title="문화관광[새창]">문화관광</a></li>     
 </ul>
</div> 

// javascript 부분

$(document).ready(function(){
     
   // 서브메뉴 slide down
   var v_gnb = $('#gnb');
   var v_gnb_groupes = $("[id^='gnb_group0']");
     
   v_gnb_groupes.mouseover(function(event){
      var v_sel_div_group_id = $(this).attr('id').replace('gnb_group0','');
   v_sel_div_group_id = parseInt(v_sel_div_group_id,10) - 1;

   v_gnb_groupes.each(function(index){
    var v_div_subgroup = $(this).next();
   
    if(index == v_sel_div_group_id){
     if(v_div_subgroup.css('display') == 'none'){
     v_div_subgroup.show();        
     }   
    }else{
     if(v_div_subgroup.css('display') == 'block'){
     v_div_subgroup.hide();
     }
    }
    v_div_subgroup.on({
     "mouseleave" : function(subevent){
        if($(this).css('display') == 'block'){
         $(this).hide();         
        }     
        subevent.preventDefault();
       }
    });
   });  
      event.preventDefault();
   });
   v_gnb_groupes.click(function(event){
      $(this).mouseover();
      event.preventDefault();
   }); 

   // 서브메뉴 열린 div 닫기
   var v_btn_gnbclose = $('.btn_gnbclose > a');
   v_btn_gnbclose.click(function(event){
    var v_selGroupDiv = $(this).parents('[class^="gnb_group0"]');
    var v_selGroupDivID = v_selGroupDiv.attr('class');
   
    if(v_selGroupDiv.css('display') == 'block'){
     v_selGroupDiv.hide();        
    }
    $('#'+v_selGroupDivID).focus();
    event.preventDefault();
   });
  

});