如何将汉堡菜单更改为常规菜单？

Question

上周末我明白了为什么你先做手机。所以我第一次尝试使用一些结构 em 和 mediaq。但是汉堡对我来说太难了。我怎样才能把汉堡菜单改成普通的
在@media 屏幕和（最小宽度：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.s 说明一旦达到 960px 屏幕 hamburger transforms into desktop menu like we see at sektop versions

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>

Below snippet is with minimum code to give you a start . You can explore many areas within it and style according to need . Also JavaScript can be the option to toggle the menu on smaller screens .

此处使用 @media 屏幕尺寸 max-width: 960px 一旦满足该条件，水平菜单将转换为垂直菜单，并会出现一个复选框（harmburger-icon）。通过使用 CSS，您可以切换 display: none（或任何其他功能，如不透明度或来自左侧......任何）

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>

如何将汉堡菜单更改为常规菜单？

How change hamburger menu to regular?

html

css

hamburger-menu