Kenny Kenny - 1 year ago 65
CSS Question

Is that possible to do it with just CSS?

I've a menu that is an unordered list.

What I want to do is that when the width of the screen/browser is less than certain pixels, the menu becomes options in form, is that possible to achieve this by using just CSS, but not PHP, JS, nor other language(s)?

Right now I can only think of CSS' media queries, but it can only styles the menu but can't change it from a list to form's options, any other suggestions?

Thanks a lot,


Answer Source

What about to show one menu when you're over expected screen width and the other one when user screen is less or equal to needed width?


<div id="menu">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
<div id="menu-mobile">
          <input type="radio" name="menu" value="home">
          <input type="radio" name="menu" value="about">


#menu {
    display: block;

#menu-mobile {
    display: none;

@media only screen and (max-device-width: 600px) {
     #menu { display: none; }
     #menu-mobile { display: block; }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download