I have a drop down menu (code can be seen below) that works well. One thing that I need to do though is have equal padding for each top level li (ul.lv1 li). I can find plenty of examples out there for equal widths but what I need is differing widths with equal padding.
Can anyone help please?
<ul class="topnav lv1">
<li class="first hasChildren"><a href="/" class="first">Home</a></li>
<li><a href="/what-we-do.aspx">What we do</a></li>
<li><a href="/client-managed-services.aspx">Client managed services</a></li>
<li><a href="/candidate-managed-services.aspx">Candidate managed services</a></li>
<li class="active activelast last hasChildren"><a href="/added-value-managed-services.aspx" class="active a开发者_运维问答ctivelast last">Added value managed services</a><ul class="lv2">
<li><a href="/added-value-managed-services/about-berrisford.aspx">About Berrisford</a></li>
<li class="last"><a href="/added-value-managed-services/service.aspx" class="last">Service</a></li>
</ul>
</li>
</ul>
Could do something like this:
var finalWidth=940;
var totWidth=0;
var lis=$("ul.lv1 > li").each(function(){
totWidth+=$(this).width();
});
var diff=finalWidth-totWidth;
if(diff>0){
var diffPer=diff/lis.length;
lis.each(function(){
$(this).css('padding-right',diffPer);
});
}
After implementing kingjiv's solution I figured out what I really needed was to put the padding on the a tag rather than the li, the final workign code is shown below, kudos to kingjiv for the help.
var finalWidth = 940;
var totWidth = 0;
var lis = $("ul.lv1 > li").each(function () {
totWidth += $(this).width();
});
var diff = finalWidth - totWidth;
if (diff > 0) {
var diffPer = diff / lis.length;
$("ul.lv1 > li a").each(function () {
$(this).css('padding-right', diffPer / 2);
$(this).css('padding-left', diffPer / 2);
});
}
精彩评论