0

当正文宽度小于给定（媒体 css）（手机等）时，是否可以使用纯 css 或非常简单的方法将导航菜单作为下拉列表传输

<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

我不知道你到底想要什么，但这也许可以帮助你。我希望

<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检测屏幕宽度，如果屏幕宽度太小，您可以使用标签将列表更改为下拉菜单。谷歌“javascript innerHTML”获取更多信息如何做到这一点。

于 2012-10-04T18:14:40.553 回答
0

如果您查看禁用 CSS 的示例 URL（或查看源代码），您将看到两种类型的导航都存在（嵌套列表和表单选择）。该页面正在使用媒体查询来确定要隐藏的元素：窄设备将隐藏列表版本，而宽设备将隐藏表单版本。

于 2012-10-04T19:42:22.890 回答