javascript - 垂直到父 div 调整大小的水平菜单

Question

我会做一个简单的css效果或者js，但是我还没有找到解决方案。

我的目标是在一个 div 中创建一个菜单，当我调整浏览器窗口或父 div 的大小时，它会将自己设置为隐藏状态，我需要将另一个 div 设置为可见，该 div 在水平方向上包含相同的菜单。

<div id="when_size_if_of_100px_visible_if_not_hidden">[menu item1 item2 item 3 item4]</div>

<div id="when_size_sup_of_100px_visible_if_not_hidden">
 menu  
 item1
 item2
 item3
</div>

我希望能说清楚。感谢您的所有回复。

Answer 1

正如 newtron 所说，您应该使用媒体查询来执行此操作。您只有一个内容，但它会根据窗口大小以不同的方式显示。这是一个工作示例 http://jsfiddle.net/pomeh/Gdve3/

使用的HTML代码是

<ul>
    <li>menu A</li>
    <li>menu B</li>
    <li>menu C</li>
    <li>menu D</li>
</ul>

<div>
    Window width is lower than 500px !
</div>

和CSS代码

li {
    border: solid black 1px;
    width: 100px;
    display: inline-block;
}

div {
    display: none;
}


@media (max-width:500px) {
    li {
        display: block;
    }
    div {
        display: block;
    }
}​

另请注意，IE 不支持媒体查询。为此，您可以使用 Respond.js Javascript 库 https://github.com/scottjehl/Respond