0

本体の幅が指定されたものよりも小さい場合 (メディア css) (携帯電話など)、純粋な css またはドロップダウン リストとして nav ul メニューを転送する本当に簡単な方法で可能ですか?

<nav>  
    <ul>  
        <li><a href="#">Blog</a></li>  
        <li><a href="#">About</a></li>  
        <li><a href="#">Archives</a></li>  
        <li><a href="#">Contact</a></li>  
        <li class="subscribe"><a href="#">Subscribe via. RSS</a></li>  
    </ul>  
</nav>

仮定：通常は表示したいのですが、画面が狭いモバイルでは、選択フォームと同じようにドロップダウンメニューとして表示したいです。

[編集]

次のようなもの: http://themewich.com/aware/ - サイズ変更時にメニューを参照してください。

4

3 に答える 3

0

CSSを無効にした（またはソースを表示した）URLの例を見ると、両方のタイプのナビゲーションが存在することがわかります（ネストされたリストとフォームの選択）。このページはメディアクエリを使用して、非表示にする要素を決定しています。ナローデバイスはリストバージョンを非表示にし、ワイドデバイスはフォームバージョンを非表示にします。

于 2012-10-04T19:42:22.890 に答える
0

私はあなたが正確に何を望んでいるのかわかりませんが、これはおそらくあなたを助けることができます。

<nav>  
<ul>  Test
    <li><a href="#">Blog</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Archives</a></li>  
    <li><a href="#">Contact</a></li>  
    <li class="subscribe"><a href="#">Subscribe via. RSS</a></li>  
</ul>  
</nav> ​

ul li{
  display:none;

}
 ul:hover li{
   display:block;

}​

jsFiddle

于 2012-10-04T18:13:49.137 に答える
0

javascriptを使用して画面幅を検出できます。画面幅が小さすぎる場合は、タグを使用してリストをドロップダウンメニューに変更できます。これを行う方法の詳細については、Googleの「javascriptinnerHTML」を参照してください。

于 2012-10-04T18:14:40.553 に答える