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

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

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

下载和演示

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

示例代码下载

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

汉堡菜单演示

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

如何制作汉堡菜单

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

第 1 步）HTML

index.html

HTML 部分应该非常简单：

首先，我们为导航菜单创建包装器