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

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>

下面的 sn-p 是用最少的代码让你开始。您可以根据需要探索其中的许多领域和风格。 JavaScript 也可以作为在小屏幕上切换菜单的选项。

这里使用@media 用于屏幕尺寸max-width: 960px 一旦满足该条件，水平菜单将转换为垂直菜单，并且将出现一个复选框（harmburger-icon）。通过使用 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>