For a fluid Navigation Menu, how to adjust padding dynamically for each Breadcrumb?

Question

I am currently building a site with a fluid layout. None of the mainstream fluid templates out there actually come with a stock horizontal navigation that can adjust itself

Answer 1

On the HTML part, if you plan to only have one horizontal navigation I would make sure it has an id. Also I don't think this is necessary:

...
 

You can have the same by doing

...

CSS wise you just make sure your unsorted list has a display block or inline-block (since it's horizontal and therefore inline). This way you can also get rid of the CSS hack on the list items if I'm correct.

According to this post auto resize text (font size) when resizing window? For the jQuery part to trigger the window resize use:

$(function() {
    // trigger once dom is ready
    resizeMe();
    // trigger on window resize
    $(window).bind('resize', function()
    {
        // your resize function
        resizeMe();
    }).trigger('resize');
});

var resizeMe = function(){
    // your stuff here
};

You can adjust CSS in one time with a JSON param string or when it's only just padding:

$("#hmenu li a").css("padding", "12px " + paddingNew + "px 12px " + paddingNew + "px");

or

$("#hmenu li a").css({"padding-left": paddingNew, "padding-right": paddingNew});

Not to sure on the px concatenation. It may not be necessary.

Added jsfiddle, you can play with the "result window" sizes to see what happens: http://jsfiddle.net/tive/tKDjg/