CSS와 제이쿼리를 이용-부드러운 드롭다운 메뉴 만들기..

CSS와 제이쿼리를 이용한 부드러운 드롭다운 메뉴 만들기..
아래의 설명은 편의상 3부분으로 나뉜다. 1)HTML부분, 2)CSS부분, 3)Jquery부분. 각 부분의 소스를 참조하여 응용하면 된다. 붉은색이 소스이고 보라색과 검정색은 부연 설명이다.

HTML

*위 HTML에서는 주메뉴와 드롭다운 메뉴 부분을 ul 로 묶지 않고 따로 분리했다. 이런 경우 드롭다운 메뉴를 어떻게 적용할 것인가? 만약 주메뉴와 드롭다운 메뉴를 ul과 li 등으로 묶었을 경우는 더 쉽다. 인터넷을 찾아보면 많이 나온다. 문제는 주메뉴와 드롭다운되어 보여지는 메뉴가 ul 이나 li 등으로 묶여 있지 않고.. 따로 떨어져 있을 때는 어떻게 할 것인가? 이다.


/*CSS - 부드러운 드롭다운(dropdown) 메뉴 영역*/
#sliding_menu
{
display:none; /*마우스가 오버 됐을 때 나타나야 함으로 우선 숨긴다*/
width:100%; height:200px; /*폭과 높이는 자신에게 맞게 수정하기 바란다.*/
position:absolute; left:0; top:78px; /*포지션 및 왼쪽 값 역시 자신에게 맞게 수정하기 바란다.*/
opacity:1; /*드롭다운 메뉴의 폰트 투명도를 나타낸다*/
background: rgba(181,178,255,0.5); /*드롭다운 메뉴의 배경색 투명도*/
padding:5px; margin-right:5px; z-index:9999; /*패딩이나 마진은 자신에게 맞게 적절히 수정하기 바란다.*/
}

/*아래는 드롭다운 메뉴안에 있는 각 메뉴들(menu01, 02. 03..)에 대한 CSS다. 각자 자신의 페이지 레이아웃에 맞게 수정하기 바란다.*/
#sliding_menu a {
position:relative;
left:0px; top:0px;
margin:0px 10px;
padding:5px;
line-height:25px;
}


/* JAVASCRPT or JQUERY 부분 - 이 부분이 가장 중요한 핵심 부분이다*/


*위 소스에서 중요한 것은... 
마우스를 아주 빠르게 움직여 계속 반복해서 호버(hover)시켜 보면.. 명령이 소위 말하는 큐(queue)에 저장되어.. 마우스가 떠나도 (마우스를 움직이지 않아도) 잠시 동안 드롭다운 메뉴가 보였다 안 보였다를 반복하게 된다는 것이다.

즉 slideDown 과 slideUp 함수의 명령이 제이쿼리의 큐(Queue)에 누적되어 마우스를 오버하지 안 해도 잠시 동안 명령이 실행되는 것이다. 이를 해결하기 위해 .stop()라는 함수를 통해 누적되는 큐(queue)를 제거해 주어야 한다. 위 제이쿼리 소스에서 .stop()를 넣고(또는 넣지 않고) 마우스를 빠르게 여러 번 호버 시켜서 테스트해보면 무슨 말인지 알 수 있을 것이다.