Posted in 웹디자인

jquery – 메뉴에 hover 효과 주기

jquery 이용해서 만드는 hover 효과

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

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

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

0

Written by 코르니유

방황하는 일러스트레이터. 질풍노도의 웹/그래픽편집디자이너. 귀가가 귀찮아 외출도 귀찮은 스페셜 귀차니스트. 철부지들을 싫어하지만, 정작 본인은 철들기를 거부하는 30대 아저씨