[스크립트 이벤트] 마우스 오버 시, 서브메뉴얼 표시하기. :: 깨알지식 , 공부공부

#간단한 서브메뉴 보이기와 가리기

스크립트에서는 선언적 함수방식과 리터럴 함수방식 그리고 생성자 함수방식으로 구성되있다.

여기서, 개발자들이 가장 많이 사용하는 선언적 함수방식으로 나타낼 예정이다.

소스코드가 간단해 , 바로 작성하겠다.

<script type="text/javascript">

function layerHidden(idName) {

  $("#"+idName).hide();

}

function layerShow(idName) {

  $("#"+idName).show();

}

</script>

소스코드를 보면, 알 수 있듯이 'idName'의 아이디값을 가지고 있는 태그를 찾아 숨키고 또는 보이게 하는 스크립트인 것을 모두 알 수 있을 것이다.

사용예제를 보겠다.

<ul class="gnb">

  <li><a onmouseover="layerShow('menu1_sub');" 

              onmouseout="layerHidden('menu1_sub')" class="gnb1"></a>

      <ul id="menu1_sub" onmouseover="layerShow('menu1_sub');"

       onmouseout="layerHidden('menu1_sub');" class="gnb_sub">

<li class=""><a href="#"></a></li><!-- 활성화시 a class="on" -->

<li class=""><a href="#"></a></li><!-- li부분은 서브메뉴를 추가할 시, 작성해준다. -->

      </ul>

   </li>

</ul>