超级鱼水平菜单。如何测量宽度答案

【问题标题】：Superfish horizontal menu. How to measure width超级鱼水平菜单。如何测量宽度
【发布时间】：2011-12-30 17:08:56
【问题描述】：

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

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

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

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

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

感谢您的意见

【问题讨论】：

标签： jquery menu width menuitem superfish

【解决方案1】：

这是执行此操作的一种方法...

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

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

【讨论】：