Jquery plug-in-like menu effects on the homepage of "Amazon excellence"

Copy codeThe Code is as follows:
/* Pop-up menu */
// No sword 2008-07-03
// Http://regedit.cnblogs.com
/* Parameter description */
// Showobj: the ID of the menu to be displayed.
// Timeout
// Speed: the menu display speed. The longer the number is, the slower the display speed. The default value 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 );
// Latency counter
Var timer = null;
// Hidden floating layer
Var hideDiv =$ ("<div> </div> ");
// Container object
Var Container =$ ("<div id = \" Container \ "> </div> ");
Container. hide ();
HideDiv. append (Container );
// Menu object
Var jqShowObj = $ (showobj );
// Hide the menu
JqShowObj. hide ();
// Menu display status
Var display = false;
// Button offset
Var offset = button. offset ();
// Menu height
Var height = jqShowObj. height ();
// Menu area width
Var width = jqShowObj. width ();
// Button height
Var btnHeight = button. height ();
// Button width
Var btnWidth = button. width ();
// Place the positioning layer at the beginning
$ (Document. body). prepend (hideDiv );
// Put it in the container
// Container. append (jqShowObj );

// ***** Display menu method start ****//
Var showMenu = function (){
// Exit the operation if the menu is displayed
If (display)
{
Return false;
}
// Set container Properties
Container.css ({
Margin: "0 auto ",
Width: btnWidth + "px ",
Height: btnHeight + "px"
});
// Locate 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"
});
// Display the positioning Layer
// Increase the height and width slowly
Container. animate ({
MarginTop: btnHeight + 4,
Height: height + 4,
Width: width + 4,
Opacity: '000000'}, speed, function (){
// Start when the animation ends //
// Display menu
JqShowObj. show ();
// Add a menu to the container
Container. append (jqShowObj );
// Remove the border
Container.css ({
Border: "0px"
});
// Set the display status to true.
Display = true;
// Move the cursor in
JqShowObj. mouseover (function (){
ClearTimeout (timer );
});
// Move the mouse away
JqShowObj. mouseout (function (){
HideMenu ();
});
// End at animation end //
});
};
// ***** Display the menu method end ****//

// ***** Hide the start of the menu method ****//
Var hideMenu = function (){
ClearTimeout (timer );
// Hide the delayed menu
Timer = setTimeout (function (){
// Display the border
Container.css ({
Border: "1px solid #666666"
});
// Clear the container
Container. empty ();
// Contract 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;
// End at animation end //
});
}, Timeout );
};
// ***** Hide the menu method end ****//

// Bind the button and mouse to the event
Button. hover (function (e ){
// Delayed display menu
ClearTimeout (timer );
Timer = setTimeout (function (){
ShowMenu ();
}, Timeout );
}, Function (){
ClearTimeout (timer );
// When the mouse leaves the button, the menu is hidden if it is still displayed.
If (display ){
Timer = setTimeout (function (){
HideMenu ();
}, Timeout );
}
});
};

NOTE: For the problem that select blocks the pop-up menu, because it has nothing to do with the plug-in, it is not resolved here, when you use the pop-up menu, you need to pay attention to this problem. The specific solution can be automatically searched or adjusted on the layout.
Package and download files