jquery plug-in imitating the pop-up menu effect on the homepage of 'Excellent Amazon'_jquery

Copy code The code is as follows:

/*Pop-up menu*/
// No sword 2008-07-03
//http://regedit.cnblogs.com
/*Parameter description*/
//showobj: Menu ID to be displayed
//timeout: delay time, how long to delay after the mouse stays/leaves to start showing/hiding the menu
//speed: menu display speed, the larger the number, the slower the display, the default is 100
//Call example: $("# button").DMenu("#content");
jQuery.fn.DMenu=function(showobj,timeout,speed){
timeout=timeout?timeout:300;
speed=speed?speed: 100;
//Button object
var button=$(this);
//Delay counter
var timer=null;
//Hidden floating layer
var hideDiv =$("

");
//Container object
var Container=$("

");
Container.hide();
hideDiv.append(Container);
//Menu object
var jqShowObj=$(showobj);
//Hide menu
jqShowObj.hide ();
//Menu display status
var display=false;
//Button offset
var offset=button.offset();
//Menu area height
var height=jqShowObj.height();
//Menu area width
var width=jqShowObj.width();
//Button height
var btnHeight=button.height();
//The width of the button
var btnWidth=button.width();
//Place the positioning layer to the front
$(document.body).prepend(hideDiv);
/ /Put it into the container
//Container.append(jqShowObj);

//****Show menu method starts****//
var showMenu=function(){
//If menu Exit the operation if it is displayed
if (display)
{
return false;
}
//Set container properties
Container.css({
margin: "0 auto ",
width:btnWidth "px",
height:btnHeight "px"
});
//Positioning the hidden layer
hideDiv.css({
position:"absolute ",
top:offset.top "px",
left:offset.left (btnWidth/2)-(width/2) "px",
height:height "px",
width:width "px"
}).show();
//Add a black border to the container
Container.css({
border:"1px solid #666666"
} ; width 4,
opacity:'100'},speed,function(){
//start when animation ends//
//Display menu
jqShowObj.show();
/ /Add menu into container
Container.append(jqShowObj);
//Remove border
Container.css({
border:"0px"
});
//Display Set the status to true
display=true;
//mouse move in
jqShowObj.mouseover(function(){
clearTimeout(timer);
});
//mouse move Open
jqShowObj.mouseout(function(){
hideMenu();
});
//When the animation ends end//
});
};
//****End of display menu method****//

//****Hide Menu Method Start****//
var hideMenu=function(){
clearTimeout(timer);
//Extension Hide menu when
timer=setTimeout(function(){
//Show border
Container.css({
border:"1px solid #666666"
});
/ /Empty the container
Container.empty();
//Shrink the container
Container.animate({
width:btnWidth,height:btnHeight,marginTop:'0', opacity: '0'
}, speed, function(){
//Start when the animation ends//
//Hide the container
Container.hide();
//Hide the positioning layer
hideDiv. hide();
//Set the display status to false
display=false;
//When the animation ends end//
});
}, timeout);
} ;
//****End of hiding menu method****//

//Bind button mouse pass event
button.hover(function(e){
//Delay display menu
clearTimeout(timer);
timer=setTimeout(function(){
showMenu();
}, timeout);
},function(){
clearTimeout(timer);
//When the mouse leaves the button, if the menu is still displayed, it will be hidden
if(display){
timer=setTimeout(function(){
hideMenu();
},timeout) ;
}
});
};


Note: The problem of select blocking the pop-up menu has nothing to do with the plug-in, so I haven’t solved it here. Which choice is where? I just want to remind everyone to pay attention to this problem when using the pop-up menu. The specific solution can be automatically searched, or the layout can be adjusted.

File package download