Question

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

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

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

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

问题是我不能依赖某种字体来实现这一点。必须是字体，无论访客机器上有什么。

感谢您的输入

Answer 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）时，我将返回这些菜单项，以便我可以将它们添加到“更多项目”菜单中（在最后一步）

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

1 个答案: