垂直水平菜單上父div調整

我會是一個簡單的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>

我希望能夠清楚。感謝您的回覆。

來源

2012-04-21 Gianluca Lodigiani

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

來源

2012-04-21 14:22:28 pomeh

好:)所以你可以標記問題解決？ – pomeh 2012-04-22 22:19:02

@GianlucaLodigiani我已經更新了關於IE支持的答案 – pomeh 2012-04-23 21:21:31

根據瀏覽器窗口大小，您可以使用Media Queries來編寫不同的CSS。

來源

2012-04-21 14:04:51 newtron

你可以使用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(); 
    } 
});

來源

2012-04-21 14:05:02 robbrit

垂直水平菜單上父div調整

回答

相關問題