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

/*弹出式菜单*/
//没剑 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);
        }
    });
};

DEMO下载地址

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