Question

I’d like to have a fluid horizontal list with a static “Browse All” on the right. If possible, I’d like this to be a single unordered list.

Item One | Item Two | Item Three | Item Four | Item Five | Item Six | Browse All

The only catch is, as the screen narrows, I’d like to hide the far right items when the space isn’t there ( excluding the :last ).

Item One | Item Two | Item Three | Item Four | Browse All

Is there a way to accomplish this with CSS or do I need to get into some JavaScript? If I need to use JavaScript what’s the best approach? Do I detect how many are visible and set the widths on each? I tried with CSS Media Queries but the variable character length of the list items make that difficult.

Any help would be greatly appreciated.

Answer 1

Here’s a JavaScript+jQuery solution: http://jsfiddle.net/thirtydot/37FtV/

//remove inline-block gaps
$('#menu').contents().filter(function() {
    return this.nodeType === 3;
}).remove();

$(window).resize(function() {
    $('#menu li').show();
    var checkWidth = 0;

    while (true) {
        checkWidth = 0;
        $('#menu li:visible').each(function() {
            checkWidth += $(this).outerWidth();
        });
        if ($(window).width() < checkWidth) {
            $('#menu li:not(:last-child):visible:last').hide();
        } else {
            break;
        }
    }
}).resize();