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

Reference: jsFiddle

I've edited your jsFiddle with comments provided on added/removed items to allow your fluid Navigation menu to work correctly.

Notably, I used white-space: nowrap; on .container, removed min/max width on .row, and used jQuery .resize(); listener to handle on-the-fly updates to the Navigation Bar.

---

REVISED: Status Update:    jsFiddle Newer Method (Tutorial)

I've approached your objective from a different angle. Instead of working with what you don't want (the boxed breadcrumbs), I've tackled the padding allocation head-on (from the outside in).

Note: Breadcrumb Buttons are demonstrated.

Here's the process I used:
1. Create HTML layout that has all breadcrumbs on a single row. No padding, no margin, just raw links.
2. Next, measure the left-over space in pixels. This will be the total padding available.
3. In the HTML Navigation markup, dynamically count the number of padding spans used.
4. The total padding available is divided by the padding spans. This becomes the Shared Portion.
5. The Shared Portion from total padding available is set on page load & window resize event.

This method is simple to understand once you see the code and allows for easy changes or custom adjustments without much fuss. Extended notes included. Tested in Chrome, Firefox, IE8 with no issues.


The jQuery Highly Optimized Version:

function fluidNavBar(){
    $('.breadcrumbPadding').css('width',0);
    if($('.links').width() < $('body').width()){
        $('.breadcrumbPadding').css('width', $('.navPaddingTotal').width() / $('.breadcrumbPadding').size());
    }
}

// RUN ON PAGE LOAD
window.onload = function() {
    $('.navBar').css('min-width', $('.links').width());
    fluidNavBar();
};

// RUN ON WINDOW RESIZE
$(window).resize(function() {
    fluidNavBar();
});

In the updated jsFiddle, you will see the previous Navigation Bar which is now pinned to the bottom for comparison.

Pick your flavor:
jQuery original tutorial
jQuery without comments
jQuery code highly optimized
jQuery original tutorial + Style

jQuery this it the one you really want Demo
jQuery this it the one you really really want Demo (because it's sizeable and auto-centers)

Answer 2

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:

<div class='twelvecol'><ul>...</ul></div> 

You can have the same by doing

<ul id='hmenu' class='twelvecol'>...</ul>

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/