0

画面幅が狭くなったときに、すべてのメニューリンクをドロップダウンメニューに入れようとしています。

これまでに行ったことは、メニュードロップダウンのHTML構成をフォームに書き込むことです。

    <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post"  class="mobile_form">
    <select name="order" class='mobile_menu'>
    <option value ="home">Home</option>
    <option value ="gallery">Gallery</option>
    <option value ="contact">Contact</option>
    </select>
    <input type='submit' name='submit'  class='mobile_menu_button' value='GO'>
    </form>

display:none;次に、cssを使用して通常の画面サイズのドロップダウンを非表示にしました。

    .mobile_form {
    display: none;
    }

次に、@media私が使用しているドロップダウンメニューを必要な場所に表示するために使用しています。これを使用しています。

    @media only screen and (min-width: 280px) and (max-width: 567px) {
    .mobile_form{
    width: 100%;
    display: block; 
    }
    }

これを実装すると、ドロップダウンは通常のレイアウトでは表示されませんが、サイズ変更されたウィンドウにも表示されません。

私がしている間違いは何ですか？なぜ私はこれをより良くすることができますか？

ありがとうございました。

4

4 に答える 4

0

}メディアクエリブロックの最後にある閉じ括弧（）を忘れました。

于 2013-01-02T12:59:33.700 に答える
0

ここでは正常に機能します：codepen
メディアクエリは、画面の幅が280px〜567pxの場合にのみ適用されることに注意してください。たぶんあなたがしたいのは、それが567px幅以下@media-query (max-width: 567px)のすべてに適用されるようにすることです。

于 2013-01-02T19:46:53.260 に答える
0

メニューの表示は適切に設定されていましたが、margin: -47px auto auto auto内部#titleBarが原因でビューポートの端からメニューが隠されていました。コメントアウトすると、フォーム要素が表示されます。

http://jsfiddle.net/vCaeG/4/

于 2013-01-02T13:49:25.677 に答える
0

メディアクエリセクションで設定する必要があります。設定display: blockしないと、非表示のままになります。

例-http://jsfiddle.net/VYQpd/

于 2013-01-02T12:44:07.420 に答える