很久之前写的一个工具条插件，外观基本上仿的163邮箱的工具条，支持无限极伸展，自己测试了IE6/7/8、firefox、opera，暂时未发现问题。
PS：第一次写博文，如有说的不明白的请见谅。有什么办法能把广告移位，他挡着代码了？
源文件下载：demo
效果预览：
一级菜单程序说明：
【html】
HTML Code
<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的作用主要是鼠标事件来替换各种状态样式。
jQuery Code
$(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");
}
)
/*----------------------------------*/
})