Question

我的菜单是无序列表。

我想要做的是，当屏幕/浏览器的宽度小于某些像素时，菜单成为表格中的选项，可以通过仅使用CSS实现这一点，但不能使用PHP，JS或其他语言（S）？

现在我只能想到CSS的媒体查询，但它只能设置菜单的样式，但不能将其从列表更改为表单的选项，还有其他任何建议吗？

非常感谢，

肯尼

Answer 1

当用户屏幕超出预期的屏幕宽度时显示一个菜单，而当用户屏幕小于或等于所需宽度时，显示另一个菜单？

HTML：

<div id="menu">
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
    </ul>
</div>
<div id="menu-mobile">
     <form>
          <input type="radio" name="menu" value="home">
          <input type="radio" name="menu" value="about">
     </form>
</div>

CSS：

#menu {
    display: block;
} 

#menu-mobile {
    display: none;
}

@media only screen and (max-device-width: 600px) {
     #menu { display: none; }
     #menu-mobile { display: block; }
}

Answer 2

<ul></ul>

和

<form>
    <select></select>
</form>

完全不同。

您只能以这两种格式创建菜单，并使用css媒体查询来决定以特定宽度显示哪一种

只用CSS可以做到这一点吗？

2 个答案: