jquery 插件之仿“卓越亚马逊”首页弹出菜单效果

/*弹出式菜单*/ 
//没剑 2008-07-03 
//http://regedit.cnblogs.com 
/*参数说明*/ 
//showobj:要显示的菜单ID 
//timeout：延时时间,鼠标停留/离开后延时多久开始显示/隐藏菜单 
//speed：菜单显示速度，数字越大，显示越慢,默认为100 
//调用示例:$("#button").DMenu("#content"); 
jQuery.fn.DMenu=function(showobj,timeout,speed){ 
timeout=timeout?timeout:300; 
speed=speed?speed:100; 
//按钮对象 
var button=$(this); 
//延时计数器 
var timer=null; 
//隐藏的浮动层 
var hideDiv=$("<div></div>"); 
//容器对象 
var Container=$("<div id=\"Container\"></div>"); 
Container.hide(); 
hideDiv.append(Container); 
//菜单对象 
var jqShowObj=$(showobj); 
//隐藏菜单 
jqShowObj.hide(); 
//菜单显示的状态 
var display=false; 
//按钮的offset 
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 (display) 
{ 
return false; 
} 
//设置容器属性 
Container.css({ 
margin:"0 auto", 
width:btnWidth+"px", 
height:btnHeight+"px" 
}); 
//定位隐藏层 
hideDiv.css({ 
position:"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" 
}); 
//显示定位层 
//高宽慢慢增大 
Container.animate({ 
marginTop:btnHeight+4, 
height:height+4, 
width:width+4, 
opacity:'100'},speed,function(){ 
//动画结束时 start// 
//显示菜单 
jqShowObj.show(); 
//添加菜单入容器 
Container.append(jqShowObj); 
//去除边框 
Container.css({ 
border:"0px" 
}); 
//显示状态置为true 
display=true; 
//鼠标移入 
jqShowObj.mouseover(function(){ 
clearTimeout(timer); 
}); 
//鼠标移开 
jqShowObj.mouseout(function(){ 
hideMenu(); 
}); 
//动画结束时 end// 
}); 
}; 
//****显示菜单方法结束****// 
//****隐藏菜单方法开始****// 
var hideMenu=function(){ 
clearTimeout(timer); 
//延时隐藏菜单 
timer=setTimeout(function(){ 
//显示边框 
Container.css({ 
border:"1px solid #666666" 
}); 
//清空容器 
Container.empty(); 
//收缩容器 
Container.animate({ 
width:btnWidth,height:btnHeight,marginTop:'0', opacity: '0' 
}, speed,function(){ 
//动画结束时 start// 
//隐藏容器 
Container.hide(); 
//定位层隐藏 
hideDiv.hide(); 
//显示状态置为false 
display=false; 
//动画结束时 end// 
}); 
}, timeout); 
}; 
//****隐藏菜单方法结束****// 
//绑定按钮鼠标经过事件 
button.hover(function(e){ 
//延时显示菜单 
clearTimeout(timer); 
timer=setTimeout(function(){ 
showMenu(); 
}, timeout); 
},function(){ 
clearTimeout(timer); 
//鼠标离开按钮时，如果菜单还是显示状态则隐藏 
if(display){ 
timer=setTimeout(function(){ 
hideMenu(); 
},timeout); 
} 
}); 
};

注：对于select挡住弹出菜单的问题，因为与插件没有关系，所以在此，偶没有解决，放哪个select在哪只是想提醒大家使用弹出菜单时要注意到这个问题，具体的解决方法可以自动搜索，或者在排版上作调整。
文件打包下载