親divの縦横のメニューサイズ変更

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

ニュートロンとして、あなたがこれを行うにはメディアクエリを使用する必要があります。コンテンツは1つのみですが、ウィンドウサイズに基づいて異なる方法で表示されます。ここで使用される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; 
    } 
}​ 

ある作業例http://jsfiddle.net/pomeh/Gdve3/

である。また、メディアクエリがIEでサポートされていないことに注意してください。この目的のために、Respond.js Javascriptライブラリhttps://github.com/scottjehl/Respond

Answer 2

Media Queriesを使用すると、ブラウザのウィンドウサイズによって異なるCSSを書き込むことができます。

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(); 
    } 
});