jquery 이용해서 만드는 hover 효과

Jquery 를 이용해서 위의 Auction에서 쓰인 효과를 구현해보았습니다. 메뉴에 마우스를 올리면, 서브로 숨겨져있던 내용이 메뉴와 이어져서 나타나는 방식입니다. 단순히 css만으로 구현하기에는 한계가 있기 때문에 jquery로 해결해주었습니다.

소스를 만들어놓고 따로 정리해놓지 않으면 재차 까먹고 다시 만드는 일이 잦아서 관리차원에서 기록으로 남겨놓습니다.

아래 내용이 해당 소스입니다. 반응형을 고려하지 않고 고정된 레이아웃의 pc상에서의 작동하는 것만 생각하고 만든 소스입니다. 깔끔하지 못한 소스입니다만, 필요하신 분은 수정해서 쓰셔도 좋습니다.

위의 예제는 아주 간략하게 보통 쇼핑몰이나 홈페이지 상단에서 알림 공간에 쓰일 수 있습니다. 보통 중요한 공지가 있을때는 팝업창을 띄우거나 레이어 팝업을 즐겨 씁니다. 하지만 사용자 입장에서는 무척 짜증나는 방법입니다. 사이트 방문자는 목적을 갖고 방문합니다만, 팝업은 그 목적을 훼방하는 요소입니다.

그래서 상단에 저렇게 고정된 형식으로 공지하는 편이 많이 선호되고 있습니다. 컨텐츠를 가리지 않아도 되고, 눈에 띄기 좋은 곳에 항상 자리잡고 있기 때문이죠. 기본적인 원리는 간단합니다. X자 표시를 눌렀을때 해당 광고창이 통채로 사라지게 하는겁니다.

기본적인 구조(html)과  스타일시트(CSS)를 통해 모양을 만들어놓고 버튼을 눌렀을때 사라지는 기능(Jquery)으로 구성되어 있습니다.