纯 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 部分应该非常简单：

首先，我们为导航菜单创建包装器<nav id="hamnav">。
随后使用<label for="hamburger">和<input type="checkbox" id="hamburger"/>作为汉堡包按钮。对于新手来说，这☰就是“3 行汉堡图标”的 HTML 符号。
最后，我们将菜单项夹<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 是所有魔法发生的地方。这可能看起来有点复杂，但让我们一步一步来。从如何在大屏幕上显示“普通菜单栏”开始：

不言自明的全宽导航菜单。
接下来，我们设置#hamitems为display: flex。将flex-grow: 1和添加flex-basis: 0到菜单项将自动将它们平均间隔开。
由于我们不需要大屏幕上的汉堡图标，我们通过附加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; }
}

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

通过添加将水平菜单转换为垂直菜单#hamitems a { width: 100% }
用显示汉堡包图标#hamnav label { display: inline-block }。
- 请特别注意——我们只展示了汉堡包label，checkbox其余部分被隐藏了。
- 当用户点击label.
有点令人困惑，但这就是魔法发生的地方。
- 默认情况下，#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

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

结束

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