仿163邮箱工具条
很久之前写的一个工具条插件,外观基本上仿的163邮箱的工具条,支持无限极伸展,自己测试了IE6/7/8、firefox、opera,暂时未发现问题。
PS:第一次写博文,如有说的不明白的请见谅。有什么办法能把广告移位,他挡着代码了?
源文件下载:demo
效果预览:
程序说明:
【html】
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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="width:130px;" /></span></div>
</div>
【样式说明】
btnGroup:工具组容器;
gBtn:按钮通用样式;
gBtnL:左端按钮样式;
gBtnC:中间按钮样式;
gBtnR:右端按钮样式;
gbTxt:按钮文本样式;
gSub:若有下级菜单,需添加此样式;
gsArrT:顶级菜单箭头样式,若有二级菜单,需添加此样式;
subs:二级菜单容器样式;
liSubs:三级及其子菜单容器样式,同gSub;
gsArrS:子菜单箭头样式,同gsArrT;
gbTextBox:文本框容器样式,同gbTxt;
【jQuery代码】
这里js的作用主要是鼠标事件来替换各种状态样式。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(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");
}
)
/*----------------------------------*/
})