Superfish 水平菜单。如何测量宽度

Question

我正在使用 superfish 在我的网站上创建水平菜单。

菜单项总是会有所不同，因为内容非常动态。菜单项不应具有固定宽度。

当显示的菜单项足够填满网站的整个宽度时，将显示最后一个名为“更多项目”的菜单。

我将如何测量每个菜单项（li 标签）的宽度，以便我可以限制显示的项目？

问题是我不能依赖某种字体来实现这一点。字体必须是访客机器上可用的任何字体。

感谢您的意见

Answer 1

这是一种方法...

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

在中间部分我将每个菜单项的宽度相加，当满足阈值（最大宽度）时，我将返回这些菜单项，以便我可以将它们添加到“更多项目”菜单（在最后一步中）