如何在调整屏幕时显示菜单下拉菜单

我试图在屏幕宽度缩小时将所有菜单链接放在下拉菜单中。如何在调整屏幕时显示菜单下拉菜单

我迄今所做的是编写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; 
    } 
    }

当我实现这一点，在下拉菜单中不正常的布局显示，但它也不会在调整大小的窗口中显示。

我在做什么错误？我能更好地做到这一点吗？

谢谢。

来源

2013-01-02 user1843335

你已经将它设置为“display：none”在媒体查询块之外......你将显示设置回“block”的位置？ – cimmanon

@cimmanon谢谢。我添加了显示：块;但仍不显示在媒体查询 – user1843335

您的菜单显示设置正确，但#titleBar中的margin: -47px auto auto auto导致它隐藏在视口的边缘。如果我注释掉，表单元素变得可见：

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

来源

2013-01-02 13:49:25 cimmanon

我真的必须建议不要使用select元素进行移动导航。将一个列表元素重用于更广泛的设备，垂直或更窄设备的下拉菜单样式会更好。 – cimmanon

感谢您的回答。你能否向我解释一下。谢谢 – user1843335

这是一个非常粗略的例子：http://jsfiddle.net/M8VT2/1/（调整结果窗格的大小） – cimmanon

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

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

来源

2013-01-02 12:44:07

谢谢。我添加了'display：block;'但仍然不显示在媒体查询中。 – user1843335

请参阅更新 – user1843335

已添加示例。你能检查那些作品吗？如果是这样，那么也许还有其他影响它的东西。 –

在你的媒体的查询块的末尾忘记关闭支架（}）。

来源

2013-01-02 12:59:33

这是我修复并更新了问题的拼写错误，但仍然存在相同的问题。这里是我正在使用的网站[Here]（http://goo.gl/hxYfU） – user1843335

在这里工作罚款：codepen
注意，当屏幕宽度为 280像素和567px之间媒体查询仅适用。也许你想要做的只是@media-query (max-width: 567px)，所以它将适用于所有以下 567px宽度。

来源

2013-01-02 19:46:53

如何在调整屏幕时显示菜单下拉菜单

回答

相关问题