jquery.hoverIntent.js디자이너 요청에 의해 CSS를 이용한 드롭다운 메뉴를 만들어야 했다.
그것도 스르륵~ 내려오는 이펙트를 겸해서..
CSS만으로도 가능은 한것 같은데 ie가 안된다. 크로스브라우징이...
어찌 검색하다가 Jquery 라는걸 난생처음 알게되었다.
위대한 구글이 hoverIntent 플러그인까지 사용할 수 있게 도와주었다.
첨부파일은 hoverintent 플러그인 파일.
function overfunc() { $('div.the_menu').slideDown(500); }
function outfunc() { if(!$.hovering) { $('div.the_menu').slideUp(500); } }
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: overfunc, // function = onMouseOver callback (REQUIRED)
out: outfunc // function = onMouseOver callback (REQUIRED)
}
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: overfunc, // function = onMouseOver callback (REQUIRED)
out: outfunc // function = onMouseOver callback (REQUIRED)
}
$(document).ready(function () {
$.hovering = false;
$('img.menu_class').hoverIntent (hiConfig);
$('div.the_menu').hover(
function() {
$.hovering = true;
},
function() {
$.hovering = false;
$('div.the_menu').slideUp(500);
}
);
});
이미지 객체에 마우스를 올리고 잠깐 딜레이 하면 div메뉴객체가 스르륵 드롭다운
div메뉴객체가 펼쳐지고 그 위에 마우스가 올려진 상황에서는 드롭다운 메뉴가 접히지 않음.
이미지 객체와 div메뉴객체에서 동시에 마우스가 out되면 드롭다운 메뉴가 슬라이드업
휴.... Jquery 첫입문작 치고는 뭐 나쁘지 않은것 같다.
'Web Program' 카테고리의 다른 글
| hosts 설정해서 개발테스트 할때 Session 문제.. (0) | 2012.01.06 |
|---|