Javascript 以编程方式确定在web导航栏中显示多少元素

假设我有一个水平导航栏，可以有任意数量的项目。现在让我们假设这个页面的宽度为1000px，所有显示的项目都是1300px。现在，我想做的是，获取任何元素，使它扩展到1000px之外，并将它们放入下拉菜单中。我遇到的问题是，当窗口宽度可以更改（如果用户更改窗口宽度，下拉列表中的元素数量会增加或减少）并且导航元素宽度是随机的时，最好的方法是什么来确定需要使用多少元素来确保所有内容都适合窗口

---

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

将导航元素放入父div中，父div的溢出设置为隐藏，以便隐藏额外的导航元素。
然后，使用jquery查找隐藏的项并将它们附加到下拉菜单中。见对这一问题的答复：

请参阅我的工作示例：。基本要素：

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

---

在调整窗口大小后，运行此加载。

尝试使用带有css的@media查询-您可以对屏幕大小进行大量控制。例如：

@media all and (max-width: 1000px){
    /*insert normal css. e.g.:*/
    body{
        width: 700px;
    }
}

---

您可以使用“最小宽度”而不是“最大宽度”。

它们的大小是否都相同？这就是问题所在，它们的大小不同。例如，一个可能是用户，而另一个可能是用户组，每个用户组本机占用不同的宽度。Google plus可能在做简单的数学运算，因为每个项目都是相同的高度。这对我来说是最后一次尝试。如果我不需要让每个元素都有一个特定的宽度就可以了，但是如果我必须这样做，我会的。你不需要让每个元素都有一个特定的宽度。请参阅此JSFIDLE，它正是您想要的：