Question

当屏幕宽度减小时，我试图将所有菜单链接放在下拉菜单中。

到目前为止，我所做的是以表格

编写菜单下拉列表的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>

然后使用css中的display:none;隐藏正常屏幕尺寸的下拉列表。

    .mobile_form {
    display: none;
    }

然后在@media我用来显示我想要的下拉菜单我正在使用它：

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

当我实现此功能时，下拉列表不会在正常布局中显示，但也不会在调整大小的窗口中显示。

我在做什么错？我可以更好地做到这一点吗？

谢谢。

Answer 1

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

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

Answer 2

您忘记了媒体查询区末尾的结束括号（}）。

Answer 3

您的菜单已正确设置其显示，但margin: -47px auto auto auto内的#titleBar导致其隐藏在视口边缘之外。如果我将其评论出来，表单元素就会显示出来：

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

Answer 4

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

下的所有内容。

如何在调整屏幕大小时显示菜单下拉列表

4 个答案: