Question

我将是一个简单的CSS效果或js，但我还没有找到解决方案。

我的目标是在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

您可以使用Media Queries根据浏览器窗口大小编写不同的CSS。

Answer 2

正如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

Answer 3

您可以使用resize：

$(window).resize(function(){
  if (window.innerWidth < 100){
    $("#when_size_if_of_100px_visible_if_not_hidden").hide();
    $("#when_size_sup_of_100px_visible_if_not_hidden").show();
  } else {
    $("#when_size_if_of_100px_visible_if_not_hidden").show();
    $("#when_size_sup_of_100px_visible_if_not_hidden").hide();
  }
});

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

3 个答案: