Question

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

<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/ - 调整大小时的菜单。

Answer 1

我不知道你想要什么，但这可能对你有帮助。我希望

<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

Answer 2

您可以使用javascript检测屏幕宽度，如果屏幕宽度太小，您可以使用标签将列表更改为下拉菜单。谷歌“javascript innerHTML”了解更多信息如何做到这一点。

Answer 3

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

显示ul作为下拉列表

3 个答案: