'Excellent Amazon' 홈페이지의 팝업 메뉴 효과를 모방한 jquery 플러그인_jquery

/*팝업 메뉴*/
// 검 없음 2008-07-03
//http://regedit.cnblogs.com
/*매개변수 설명*/
//showobj: 표시할 메뉴 ID
/ /timeout: 지연 시간, 마우스가 메뉴 표시/숨기기를 시작하기 위해 머무르거나 떠난 후 지연되는 시간
//speed: 메뉴 표시 속도, 숫자가 클수록 표시가 느려지고 기본값은 100
//호출 예: $("# 버튼").DMenu("#content");
jQuery.fn.DMenu=function(showobj,timeout,speed){
timeout=timeout?timeout:300 ;
속도=속도?속도: 100;
//버튼 객체
var 버튼=$(this)
//지연 카운터
var 타이머=null; 숨겨진 플로팅 레이어
var hideDiv =$("")
//Container 객체
var Container=$("");
Container.hide();
hideDiv.append(Container);
//메뉴 객체
var jqShowObj=$(showobj);
// 메뉴 숨기기
jqShowObj.hide ();
//메뉴 표시 상태
var display=false;
//버튼 오프셋
var offset=button.offset(); /메뉴 영역 높이
var height=jqShowObj.height();
//메뉴 영역 너비
var width=jqShowObj.width()
//버튼 높이
var btnHeight=button .height();//버튼 너비
var btnWidth=button.width()
//포지셔닝 레이어를 앞쪽으로 배치
$(document.body).prepend (hideDiv)/ /컨테이너에 넣습니다
//Container.append(jqShowObj)

//****메뉴 표시 방법이 시작됩니다****//
var showMenu=function( ){
//If 메뉴 표시되면 작업 종료
if (display)
{
return false
}
//컨테이너 속성 설정
컨테이너. css({
margin: "0 auto ",
width:btnWidth "px",
height:btnHeight "px"
})
//숨겨진 레이어 위치 지정
hideDiv.css({
위치:"absolute",
top:offset.top "px",
left:offset.left (btnWidth/2)-(width/2) "px",
height:height "px",
width:width "px"
}).show()
//컨테이너에 검은색 테두리 추가
Container.css({
border:"1px solid #666666"
} ; 너비 4,
불투명도:'100'},speed,function(){
//애니메이션이 끝나면 시작//
//표시 menu
jqShowObj.show();
/ /컨테이너에 메뉴 추가
Container.append(jqShowObj)
//테두리 제거
Container.css({
border:" 0px"
});
//표시 상태를 true로 설정
display=true;
//마우스 이동
jqShowObj.mouseover(function(){
clearTimeout( 타이머);
});
//마우스 이동 열기
jqShowObj.mouseout(function(){
hideMenu();
})//애니메이션이 종료될 때 end//
})
};
//****디스플레이 메뉴 종료 방법****//

//****메뉴 방법 시작 숨기기****//
var hideMenu=function (){
clearTimeout(timer);
//Extension
timer=setTimeout(function(){
//테두리 표시
Container.css({
border일 때 메뉴 숨기기 :"1px solid #666666"
});
/ /컨테이너 비우기
Container.empty()
//컨테이너 축소
Container.animate({
너비 :btnWidth,height:btnHeight,marginTop:'0', opacity: '0'
}, speed, function(){
//애니메이션이 끝나면 시작//
//컨테이너 숨기기
Container.hide();//위치 지정 레이어 숨기기
hideDiv.hide()
//표시 상태를 false로 설정
display=false; 애니메이션 종료 end//
}),
}
//****메뉴 숨기기 방법 종료****//

//버튼 마우스 패스 바인딩 event
button.hover(function(e){
//지연 표시 메뉴
clearTimeout(timer);
timer=setTimeout(function(){
showMenu();
}, timeout);
},function(){
clearTimeout(timer);
//마우스가 버튼을 떠나도 메뉴가 계속 표시되면 숨겨집니다.
( display){
timer=setTimeout(function(){
hideMenu();
},timeout)
}
})
};


참고: 팝업 메뉴를 차단하는 선택 문제는 플러그인과 관련이 없으므로 여기서는 해결하지 못했습니다. 모든 사람에게 이에 주의하도록 상기시키고 싶습니다. 팝업 메뉴 이용 시 특정 해결 방법을 자동으로 검색하거나 레이아웃을 조정할 수 있습니다.

파일 패키지 다운로드