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

Posted 2023-04-13

【中文标题】如何将汉堡菜单更改为常规菜单？

【英文标题】：How change hamburger menu to regular?

【发布时间】：2021-12-11 06:21:26

【问题描述】：

上周末我意识到为什么你首先要做移动。所以第一次尝试了一些结构 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

【问题讨论】：

** 汉堡菜单到普通菜单** 你是什么意思

汉堡菜单到通常的ul li菜单链接链接链接链接链接

这个问题不太可能得到答案，除非你添加一些细节或你想要实现的行为的图片

没想到我这么不清楚

请看How to Ask。

【参考方案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>

【讨论】：

thanks.see 它正在运行，但仍然无法在我的页面/meh 上运行

将media 用于较小的屏幕尺寸@DeanWinchester88

codepen.io/DeanWinchester88/pen/gOxmeym 当我从移动设备变为更大时。基本上我需要将 max-width 更改为 min-width 并交换你写的属性。不工作/天哪，为这么简单的任务苦苦挣扎

codepen.io/DeanWinchester88/pen/gOxmeym 这是我通过重新编码可以获得的最大值

把这个放在你的min-width: 960px或者你喜欢的任何一个：#menutransform: translate(0, 0);