これはCSSだけで可能ですか？

Question

私は順序付けられていないリストであるメニューを持っています。

私がしたいのは、画面/ブラウザの幅が特定のピクセルよりも小さい場合、メニューは形式のオプションになります。PHP、JS、またはCSSだけでは実現できない他の言語）？

今私はCSSのメディアクエリについて考えることができますが、メニューのスタイルを変更するだけですが、リストからフォームのオプションやその他の提案を変更することはできません。

どうもありがとう、

ケニー

Answer 1

何が期待される画面幅と他の1つの上にいるときに1つのメニューが表示されるまでにユーザーの画面が必要な幅以下の場合

HTML：

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

CSS：あなたが信じるならば

#menu { 
    display: block; 
} 

#menu-mobile { 
    display: none; 
} 

@media only screen and (max-device-width: 600px) { 
    #menu { display: none; } 
    #menu-mobile { display: block; } 
} 

Answer 2

<ul></ul> 

と

<form> 
    <select></select> 
</form> 

全く異なるものです。

あなただけのこれらの2つの形式でメニューを作成し、一定の幅で表示するかを決定するために、CSSメディアクエリを使用することができます