如何将汉堡菜单改为普通菜单?

Question

上周末我意识到为什么要先做手机。所以我第一次尝试用一些结构和介质。但是汉堡对我来说太难了。我怎么能改变汉堡菜单为常规一个
在@media屏幕和(min-width:960px)?谢谢你

https://codepen.io/DeanWinchester88/pen/gOxmeym

/*
* And let's fade it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
opacity: 1;
}

p。年代澄清一旦达到960px屏幕汉堡包转换为桌面菜单，就像我们在sektop版本中看到的那样

Answer 1

首先，你的标记是错误的，你不应该这样使用:

<ul id="menu">
<a href="#"><li></li></a>
<a href="#"><li></li></a>   
</ul>

必须是这样的:

<ul id="menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

下面的代码片段是用最少的代码给你一个开始。您可以在其中探索许多领域并根据需要进行设计。JavaScript也可以作为在小屏幕上切换菜单的选项。

这里使用@media作为屏幕尺寸，max-width: 960px一旦满足条件，水平菜单将转换为垂直菜单，并出现一个复选框(汉堡包图标)。通过使用CSS，你可以切换display: none(或任何其他功能，如不透明度或来自左边....any)

ul {
display: flex;
flex-direction: row;
}
li {
list-style-type: none;
}
li a {
text-decoration: none;
padding: 1rem;
display: block;
}
input {
display: none;
}
@media screen and (max-width: 960px) {
ul {
display: flex;
flex-direction: column;
}
input {
display: block;
}
input:checked+ul {
display: none;
}
}

<input type="checkbox" />
<ul id="menu">
<li><a href="#">Products</a></li>
<li><a href="#">Ideas</a></li>
<li><a href="#">Brands</a></li>
<li><a href="#">Gifts</a></li>
<li><a href="#">Stores</a></li>
</ul>