Question

I am using superfish to create a horizontal menu on my website.

The menu items will always vary, as the content is very dynamic. The menu items should not have a fixed width.

When the enough menu items are displayed to fill the entire width of the website, a last menu called ‘More Items’ will be shown.

How would I go about measuring the width of each menu item (li tag), so that i can limit the items shown?

The problem is that I can not depend on a certain font to achieve this. Font’s must be, whatever is available on the visitors machine.

Thanks for your input

Answer 1

Here’s one way to do this…

example jsfiddle

$(function() {
    $('.sf-menu').superfish();

    var tempWidth = 0,
        // width of our layout minus width of our "More Items..." menu
        maxWidth = $('#container').outerWidth() - $('#more').outerWidth(); 

    // get any menu items that extend past our maxWidth
    var $moreItems = $('.sf-menu > li').not('#more').filter(function() {
        tempWidth += $(this).outerWidth();
        if (tempWidth >= maxWidth) return true;
        else return false;
    });

    // if we have items extending past, add those items to "More Items..."
    if ($moreItems.length > 0) {
        $('#more').show().find('ul').append($moreItems);
    } else {
        $('#more').hide();
    }
});

In that middle segment I’m totaling up the widths of each menu item and when a threshold is met (the maxWidth) I’m returning those menu items so that I can add them to the “More Items” menu (in the final step)