Kenny Kenny - 2 months ago 4x
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,



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