animate( ), slideUp( ), slideDown( )으로 네비게이터 구현하기

애니메이션 구현을 배웠으니 본격적으로 애니메이션을 활용한 내비게이터를 구현해보았다.

구현에 앞서 내비게이터 설계의 감을 잡기 위해 이미 구성된 소스코드를 차근차근 분석했다.

 

강원대학교 컴퓨터공학과의 HTML5 소스코드로 ul, li, a 등의 태그들이 적절히 사용되었다.

기본적으로 ul, li, a 태그를 적절히 조합한 후에 float:left 속성을 적용해 수평으로 배치하였다.

대략적인 원리를 설명하자면, 우선 학과 소개, 교육과정, 입학안내 등의 텍스트에 마우스를 올리면(Mouseenter)

 

slideUp( ) 되어있던 인사말, 연혁, 수행사업 등의 하위 메뉴가 slideDown( )된다.

이때 페이지에 처음 방문했을때나 새로 고침 했을 때 slideDown( )을 통해 하위 메뉴를 집어넣고 시작하면

잠깐 동안은 하위 메뉴가 노출되는 문제가 발생한다.

 

    //하위메뉴는 처음에 hidden 상태임
    $("ul[id^='sub']").slideUp(0,"linear");
    $("ul[id^='sub']").css("visibility","visible");

일단 hidden상태로 초기 지정한 상태에서 문서가 ready 되자마자 다음의 소스코드를 추가하면

정상적으로 네비게이터 하위 메뉴가 보이지 않고 slideUp( ) 하게 된다.

 

또 하나의 문제는 Mouseenter 이벤트와 Mouseleave이벤트를 모두 a태그에 지정하면 상위 메뉴에 포커스를 두고

하위 메뉴를 선택하려 할 때 Mouseleave이벤트가 발생하여, 정상적으로 하위 메뉴를 선택할 수 없게 된다.

 

이때 필요한 것이 div#wrapper이며, Mouseenter이벤트를 a태그에 등록하여 하위 메뉴를 꼭 상위 메뉴를 통해서만

열 수 있도록 하는 반면, Mosueleave 이벤트는 div#wrapper에 등록하여 상위 메뉴의 범위를 벗어나도

Mouseleave이벤트는 하위요소에도 범위가 적용되기 때문에 문제없이 작동하는 것을 알 수 있다.