Question

I would be a simple css effect or js, but I don’t have found solution yet.

my target to make a menu inside a div that when I resize my browser windows or the parent div, this set itself hidden and I need to set another div as visible that contain the same menu in horizontal orientation.

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

I hope to be clear. thank for all your response.

Answer 1

As newtron as said, you should use media queries to do this. You have only one content but it will be displayed in different manner based on the window size. Here is a working example http://jsfiddle.net/pomeh/Gdve3/

The HTML code used is

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

And CSS code

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

div {
    display: none;
}


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

Also notice that media queries are not supported on IE. For this purpose, you can use Respond.js Javascript library https://github.com/scottjehl/Respond