mouseout 에 사라지는 자바스크립트 팝업메뉴

웹페이지에서 생각할 수 있는 일반적인 팝업 메뉴라면, 핫스팟을 클릭하면 팝업메뉴가 나타나고 핫스팟을 다시 클릭하거나 팝업메뉴가 포커스를 잃는 경우 팝업메뉴가 사라지는 것이다. 이번 일에는 팝업이 뜨고 난 후 커서가 핫스팟이나 팝업메뉴 영역을 벗어나면 팝업메뉴가 사라지는 약간은 특이한 팝업메뉴가 필요했다.

인터넷에서 구할 수 있는 비슷한 용도의 코드들 몇 개를 받아 적용을 시도했지만 요구사항에 딱 맞지 않아 수정하는데 오히려 시간이 더 들것 같고 어떤 것들은 코드를 읽기 어렵게 (obfuscated) 만들어 놔서 그냥 만들기로 했다.

팝업메뉴의 요구사항을 정리해 보면 다음과 같다.

• 핫스팟을 클릭하면 팝업메뉴가 핫스팟 엘리먼트 아래에 나타난다.
• 팝업메뉴가 표시중인 경우 핫스팟을 클릭하면 팝업메뉴가 사라진다.
• 팝업메뉴가 표시중인 경우 커서가 팝업메뉴와 핫스팟 영역을 벗어나면 팝업메뉴가 사라진다.
• 팝업메뉴가 표시되거나 사라질 때 페이드 효과를 적용한다.
• 접근성을 해쳐서는 안된다
• 재사용성이 좋도록 구현한다.

prototype과 script.aculo.us 를 사용해 구현해봤다. 코드와 실행 예는 다음 링크를 통해 확인할 수 있다.

코드와 실행 예