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

【问题标题】：Vertical to horizontal menu on parent div resizing父 div 上的垂直到水平菜单调整大小
【发布时间】：2012-04-24 05:21:08
【问题描述】：

我会是一个简单的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>

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

【问题讨论】：

标签： javascript jquery css resize media-queries

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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();
  }
});

【讨论】：