开发者

Drop down menu equal padding on top level li's

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);
    });
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜