纯 CSS 中的简单响应式汉堡菜单

欢迎阅读有关如何创建简单的响应式纯 CSS 汉堡菜单的教程。是的，互联网上有很多其他的汉堡菜单，但其中一些仍然需要使用 Javascript。所以这里是一个纯 CSS 驱动的菜单，而不是一行 Javascript。继续阅读以了解如何构建一个！

ⓘ 我在本教程开始时包含了一个包含所有源代码的 zip 文件，因此您不必复制粘贴所有内容……或者如果您只是想直接进入。 

下载和演示

首先，这是承诺的示例代码的下载链接。 

示例代码下载

单击此处下载源代码，我已在 MIT 许可下发布它，因此请随意在其上构建或在您自己的项目中使用它。 

汉堡菜单演示

前进。调整窗口大小并查看正在运行的汉堡菜单。

 

如何制作汉堡菜单

在现代 CSS 的帮助下，如今构建汉堡菜单实际上并不难……

 

第 1 步）HTML

index.html

<!-- (A) MENU WRAPPER -->
<nav id="hamnav">
  <!-- (B) THE HAMBURGER -->
  <label for="hamburger">&#9776;</label>
  <input type="checkbox" id="hamburger"/>
 
  <!-- (C) MENU ITEMS -->
  <div id="hamitems">
    <a href="a.html">First</a>
    <a href="b.html">Second</a>
    <a href="c.html">Third</a>
    <a href="d.html">Forth</a>
  </div>
</nav>

HTML 部分应该非常简单：

1. 首先，我们为导航菜单创建包装器<nav id="hamnav">。
2. 随后使用<label for="hamburger">和<input type="checkbox" id="hamburger"/>作为汉堡包按钮。对于新手来说，这☰就是“3 行汉堡图标”的 HTML 符号。
3. 最后，我们将菜单项夹<a>在  <div id="hamitems">包装器中。

就是这样，涉及零 Javascript。

 

 

步骤 2) 大屏幕的 CSS

ham-menu.css

/* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
  width: 100%;
  background: #000;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex; }
#hamitems a {
  flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}
#hamitems a:hover { background: #af0d0d; }

/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }

CSS 是所有魔法发生的地方。这可能看起来有点复杂，但让我们一步一步来。从如何在大屏幕上显示“普通菜单栏”开始：

1. 不言自明的全宽导航菜单。
2. 接下来，我们设置#hamitems为display: flex。将flex-grow: 1和添加flex-basis: 0到菜单项将自动将它们平均间隔开。
3. 由于我们不需要大屏幕上的汉堡图标，我们通过附加display: none到#hamnav label和来隐藏它#hamburger。

这实际上是大屏幕上所有重要的机制，我们现在有了一个可以工作的水平导航栏。

 

 

步骤 3) 小屏幕的响应式 CSS

ham-menu.css

/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
  /* (A) BREAK INTO VERTICAL MENU */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
 
  /* (B) SHOW HAMBURGER ICON */
  #hamnav label { 
    display: inline-block; 
    color: white;
    background: #a02620;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #hamitems { display: none; }
  #hamnav input:checked ~ #hamitems { display: block; }
}

最后，我们在小屏幕上添加一些样式更改来实现响应式魔法：

1. 通过添加将水平菜单转换为垂直菜单#hamitems a { width: 100% }
2. 用 显示汉堡包图标#hamnav label { display: inline-block }。
   • 请特别注意——我们只展示了汉堡包label，checkbox其余部分被隐藏了。
   • 当用户点击label.
3. 有点令人困惑，但这就是魔法发生的地方。
   • 默认情况下，#hamitems { display: none; }将隐藏菜单项。
   • #hamnav input:checked ~ #hamitems { display: block; }checkbox用简单的英语 -选中 隐藏时显示菜单项。

 

 

有用的信息和链接

代码就是这样，这里有一些你可能会觉得有用的额外内容。

 

粘性菜单栏

当用户在您的网站上向下滚动时，是否希望菜单栏永久固定在屏幕顶部？只需将 a 添加position: sticky到导航栏，就可以了。

主题.css

#hamnav {
  position: sticky;
  top: 0;
}

但这可能会在小屏幕上引起更多问题，因此请明智地使用它。

 

更大的汉堡？

汉堡包图标是一个 HTML 符号。是的，更改大小就像设置一样简单label[for="hamburger"] { font-size: XX em }。

 

我想要下拉项目！

这将不再“简单”，但请随时挑战自己……

• 使用纯 CSS 的下拉菜单- Code Boxx
• 多级下拉菜单？这更像是一个树形菜单- Code Boxx

 

兼容性检查

• CSS Flexbox – CanIUse
• CSS 兄弟选择器- CanIUse

这个汉堡菜单适用于所有现代浏览器。

 

结束

感谢您的阅读，本教程到此结束。我希望它可以帮助您为您的项目创建更好的菜单系统，如果您对本指南有任何补充，请随时在下面发表评论。祝你好运，编码愉快！