CSS (and maybe jQuery) for collapsing navigation bar

I have a horizontal navigation bar. Each "button" is a span with a background color and some other CSS set, that when clicked uses jQuery to present a stylized <ul>/<li> drop-down menu. Each button span also contains an icon created with a normal <img>. My page layout is fluid.

My top nav's width isn't too wide in general, but I want to be able to handle cases where it doesn't quite fit. An elegant solution I'd like to implement involves "collapsing" the nav bar if it is too wide. Let me know what you want I mean:

Full Nav Width:

Partially Collapsed:

Fully Collapsed:

Basically, as the width of the nav's container shrinks, I would like the right-most button's text to vanish, shrinking to display just the icon. If the nav's container were even smaller, the next button would shrink as well. This w开发者_如何学Goould continue as long as it was necessary, but I typically only expect the outer button or two to have to collapse in this manner. You might recognize similar behavior on the ribbon control within later versions of Microsoft Office.

How can I implement such behavior in a clean and compatible manner?

Note that I am not opposed to completely changing these elements around. I am only using <span> for the buttons, as that is what I started with. If they need to be something different, that is fine with me.

Each button looks like this:

<span class="menu_head" id="mnuButton">Button Name<img src="icon.png" alt="Button Name" /></span>

You can find a JSFiddle of what I have now here: http://jsfiddle.net/9FwP7/1

This worked for me, assuming #menu is the container, and the menu item looks like this:

<div id="menu">
    <span class="menu_head" id="mnuButton1"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
    <span class="menu_head" id="mnuButton2"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
    <span class="menu_head" id="mnuButton3"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
    <span class="menu_head" id="mnuButton3"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
    <span class="menu_head" id="mnuButton4"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
</div>

The jQuery (this could be changed to trigger on resize()):

    $(function () {
        // get total number of menu items
        var no_menu_items = $('.menu_head').length;
        var incrementer = 0;
        for (var i = 0; i < no_menu_items; i++) {
            // add the width of the current menu item
            incrementer += $('.menu_head').eq(i).width();
            if ($('#menu').width() < incrementer) {
                $('.menu_head').eq(i).find('span').hide();       
            }   
        }        
    });

http://jsfiddle.net/psjXh/2/

raw javascript solution here. it works (i have set the container to be 400px but works with less. i also set it to overflow:hidden so you can see if/when it fails)

you could animate() the process with jQuery, but that is the logic

this one is just the basics of what you want. you can add animations or whatever and retrofit to your own code as needed.

jsfiddle.net solution (updated)

<div id="container">
<ul>
    <li><div class="menu_head" id="mnuButton"><span>Button Name</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
    <li><div class="menu_head" id="mnuButton"><span>Button Name das</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
    <li><div class="menu_head" id="mnuButton"><span>Button Name</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
    <li><div class="menu_head" id="mnuButton"><span>Button Name</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
    <li><div class="menu_head" id="mnuButton"><span>Button Name</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
</ul>
</div>

.

$(window).resize(function() {
    var containerWidth = $("#container").width();

    // get sum of widths
    var totalWidth = 0;
    $("li").each(function(index) {
        totalWidth += parseInt($(this).width(), 10) + 11;
    });

    // get the width of the last element hidden
    var lasthiddenwidth = $("li span:hidden:first").width();
    if (containerWidth < totalWidth) {
        // if the menu no longer fits, hide the last visible element
        $("li span:visible:last").hide();    
    } else if (containerWidth > totalWidth + lasthiddenwidth) {
        // if the container can fit the menu and the last hidden element, show it again
        $("li span:hidden:first").show();           
    }

});