仿163邮箱工具条

很久之前写的一个工具条插件，外观基本上仿的163邮箱的工具条，支持无限极伸展，自己测试了IE6/7/8、firefox、opera，暂时未发现问题。

PS：第一次写博文，如有说的不明白的请见谅。有什么办法能把广告移位，他挡着代码了？

源文件下载：demo

效果预览：

一级菜单 

• 二级菜单
• 二级菜单 
  • 三级菜单
  • 三级菜单
  • 三级菜单 
    • 四级菜单
    • 四级菜单
    • 四级菜单
  • 三级菜单
• 二级菜单

一级菜单

一级菜单

一级菜单 

• 二级菜单
• 二级菜单 
  • 三级菜单
  • 三级菜单
  • 三级菜单 
    • 四级菜单
    • 四级菜单
    • 四级菜单
  • 三级菜单
• 二级菜单

一级菜单

一级菜单

 

程序说明：

【html】

<div class="btnGroup">
    <div class="gBtn gBtnL gSub">
　　　　 <span class="gbTxt"><img />一级菜单</span><span class="gsArrT"></span>
        <ul class="subs">
            <li><a href="#">二级菜单</a></li>
            <li class="liSubs">
　　　　　　　　  <a href="#">二级菜单</a><span class="gsArrS"></span>
                <ul>
                    <li><a href="#"><img />三级菜单</a></li>
                    <li><a href="#">三级菜单</a></li>
                    <li class="liSubs">
　　　　　　　　　　　　　 <a href="#">三级菜单</a><span class="gsArrS"></span>
                        <ul>
                            <li><a href="#">四级菜单</a></li>
                            <li><a href="#">四级菜单</a></li>
                            <li><a href="#">四级菜单</a></li>
                        </ul>
                    </li>
                    <li><a href="#">三级菜单</a></li>
                </ul>
            </li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </div>
    <div class="gBtn gBtnC"><span class="gbTxt"><img />一级菜单</span></div>
    <div class="gBtn gBtnC"><a href="#" class="gbTxt">一级菜单</a></div>
    <div class="gBtn gBtnR"><span class="gbTextBox"><input type="text" style="130px;" /></span></div>
</div>

【样式说明】

btnGroup：工具组容器；

gBtn：按钮通用样式；

gBtnL：左端按钮样式；

gBtnC：中间按钮样式；

gBtnR：右端按钮样式；

gbTxt：按钮文本样式；

gSub：若有下级菜单，需添加此样式；

gsArrT：顶级菜单箭头样式，若有二级菜单，需添加此样式；

subs：二级菜单容器样式；

liSubs：三级及其子菜单容器样式，同gSub；

gsArrS：子菜单箭头样式，同gsArrT；

gbTextBox：文本框容器样式，同gbTxt；

【jQuery代码】

这里js的作用主要是鼠标事件来替换各种状态样式。

$(function(){
    /*------------------------*/
    $(".gBtn").not(".gBtnL,.gBtnC,.gBtnR").hover(
        function(){
            
            $(this).addClass("gBtnHover");
        },
        function(){
            $(this).removeClass("gBtnHover");
        }
    ).not(".gSub").mousedown(function(){
        $(this).addClass("gBtnDown");
    }).mouseup(function(){
        $(this).removeClass("gBtnDown");
    })
    /*--------------------*/
    $(".gBtnL").hover(
        function(){
            $(this).addClass("gBtnLHover");
        },
        function(){
            $(this).removeClass("gBtnLHover");
        }
    ).not(".gSub").mousedown(function(){
        $(this).addClass("gBtnLDown");
    }).mouseup(function(){
        $(this).removeClass("gBtnLDown");
    })
    /*--------------------*/
    $(".gBtnC").hover(
        function(){
            $(this).addClass("gBtnCHover");
        },
        function(){
            $(this).removeClass("gBtnCHover");
        }
    ).not(".gSub").mousedown(function(){
        $(this).addClass("gBtnCDown");
    }).mouseup(function(){
        $(this).removeClass("gBtnCDown");
    })
    /*--------------------*/
    $(".gBtnR").hover(
        function(){
            $(this).addClass("gBtnRHover");
        },
        function(){
            $(this).removeClass("gBtnRHover");
        }
    ).not(".gSub").mousedown(function(){
        $(this).addClass("gBtnRDown");
    }).mouseup(function(){
        $(this).removeClass("gBtnRDown");
    })
    /*-----------------------*/
    $(".gSub .gbTxt,.gSub .gsArrT").click(function(){
        var btn=$(this).parent(".gSub");
        if(btn.hasClass("gBtnDown")||btn.hasClass("gBtnLDown")||btn.hasClass("gBtnCDown")||btn.hasClass("gBtnRDown")){
            btn.removeClass("gBtnDown gBtnLDown gBtnCDown gBtnRDown");
            $("body").unbind("click");
        }else{    
            $(".gSub").removeClass("gBtnDown gBtnLDown gBtnCDown gBtnRDown");
            
            if(btn.hasClass("gBtnL")){
                btn.addClass("gBtnDown gBtnLDown");
            }else if(btn.hasClass("gBtnC")){
                btn.addClass("gBtnDown gBtnCDown");
            }else if(btn.hasClass("gBtnR")){
                btn.addClass("gBtnDown gBtnRDown");
            }else{
                btn.addClass("gBtnDown");
            }
            $("body").one("click",function(){
                btn.removeClass("gBtnDown gBtnLDown gBtnCDown gBtnRDown");
            })
            return false;
        }
    })
    /*---------------------------------*/
    $(".gSub .subs li").hover(
        function(){
            $(this).addClass("liHover").children("a").addClass("white").siblings(".gsArrS").addClass("gsArrSHover").siblings("ul").addClass("subHover");
        },
        function(){
            $(this).removeClass("liHover").children("a").removeClass("white").siblings(".gsArrS").removeClass("gsArrSHover").siblings("ul").removeClass("subHover");
        }
    )
    /*----------------------------------*/
    
})