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

在这里工作正常：codepen
请注意，您的媒体查询仅在屏幕宽度介于280 像素和 567 像素之间时应用。也许您想要做的只是@media-query (max-width: 567px)让它适用于宽度低于567 像素的所有内容。

于 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

}您忘记了媒体查询块末尾的右括号 ( )。

于 2013-01-02T12:59:33.700 回答
0

您需要display: block在媒体查询部分进行设置，否则它仍然会被隐藏。

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

于 2013-01-02T12:44:07.420 回答