3

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

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

4

2 回答 2

0

将导航元素放在其溢出设置为隐藏的父 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。

于 2012-12-17T21:55:14.420 回答
0

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

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

您可以使用min-width而不是max-width。

于 2013-01-21T12:31:14.867 回答