Question

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 would 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

Answer 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();       
            }   
        }        
    });