with adaptable width, using Jquery

Question

I'm trying to make a flexible, horizontal menu that will always have a total width of 100%. Regardless of the number of menuEntries.

I imagine that i need a script that will read the number of li, devide that number with the width of the ul and set the result as the width of the li..?

Basically i'm hoping to emulate the functionality of the new css3 "box-flex" as described in this post, only with Jquery.

" <li> elements with adapted width "

score 1 · Accepted Answer · answered Jan 19 '12 at 08:18

1

you can try something like

$(document).ready(function(){
  var count = $('li').length;
  var width = 100/count;
  $('li').css("width",width+"%");
});

answered Jan 19 '12 at 08:18

dku.rajkumar

18,414
7
41
58

score 1 · Answer 2 · answered Jan 19 '12 at 08:19

You will have rounding issues. So you will have some space left on the left or the right.

Try this, which gives you 2 options, fix the menu by % or by px:

function fixMenuPX()
{
    var parent = $("ul"),
        pWidth = parent.width(),
        chLength = parent.children().length,
        chWidth = Math.floor(pWidth / chLength);

    children.css({ width : chWidth });   
}

function fixMenuPerc()
{
    var parent = $("ul"),
        chPerc= 100 / parent.children().length;

    children.css({ width : chPerc + "%" });   
}

fixMenuPerc();

Try this fiddle: http://jsfiddle.net/VGdNB/

with adaptable width, using Jquery

2 Answers2