以编程方式确定要在web导航栏中显示的元素数量

Question

假设我有一个水平导航栏，其中可以包含任意数量的项目。现在假设此页面的宽度为1000px，如果显示所有项目，则将为1300px。现在，我想要做的是将任何导致它超出1000px的元素放入下拉菜单中。我遇到的问题是，当窗口宽度可以改变(如果用户改变窗口宽度，下拉列表中的元素数量将增加或减少)，并且导航元素宽度是随机的时，我需要获取多少元素才能确保所有内容都适合窗口？

类似于google plus的侧边导航，只是水平而不是垂直。

Answer 1

将导航元素放在溢出设置为隐藏的父div中，以便隐藏额外的导航元素。

然后，找到使用jquery隐藏的项目，并将它们添加到下拉菜单中。请参阅此问题的答案：jQuery: How to get content not visible with overflow: hidden?

请参阅我的工作示例：http://jsfiddle.net/zSXTb。基础知识：

var h = $("#container").height();
$("#container").find("div").each(function() {
    if ($(this).position().top > h) {
        $(this).clone().appendTo($("#extrasContent"));
    }
});

在窗口调整大小时运行此onload。