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在哪只是想提醒大家使用弹出菜单时要注意到这个问题，具体的解决方法可以自动搜索，或者在排版上作调整。