15 个超棒的 CSS 汉堡菜单

响应式网页设计早已成为网络的标配。几乎每个网站都有导航菜单，通常采用汉堡菜单来实现。这里有一系列最佳的 CSS 汉堡菜单（+ 图标和动画）供您参考！

➡️更新更多汉堡菜单（点击）！ 🚀

在移动导航中，例如在平板电脑或智能手机上，导航菜单通常由于空间原因被隐藏，只有点击汉堡菜单才能看到。这里有无限的设计可能性。有些是用纯 CSS 编写的，无需 JavaScript；有些则同时使用 CSS 和 JavaScript——总有一款适合您。

菜单大多由两三层组成，就像汉堡（面包、肉饼、面包）一样，只需点击一下即可在叠加层中显示所有菜单项。单个笔触可以旋转成 X 形、消失或快速移动。无限可能！我在这里为您整理了一些最佳方案——激发您的灵感吧。

图中所示的画笔已获得 MIT 许可。您可以在Codepen 博客上找到更多关于您自己使用的信息。

#1 Gooey 菜单

作者：Luca Bebber；
编码语言：HTML、CSS（SCSS）；

#2 SVG CSS3 菜单/汉堡按钮

作者：Kyle Henwood；
编码语言：HTML、CSS（SCSS）、JS；

#3 移动菜单动画

作者：Stas Melnikov；
编码语言：HTML、CSS、JS；

#4 页面倾斜效果

作者：Marco Fugaro；
编码语言：HTML、CSS（SCSS）、JS（jQuery）；

#5 弹性菜单

作者：Long；
编码语言：HTML、CSS（SCSS）、JS；

#6 汉堡图标动画

作者：Ahmad Emran；
编码语言：HTML、CSS、JS；

#7 SVG Gooey 悬停菜单概念

作者：Michael Leonard；
编码语言：HTML、CSS、JS（jQuery）；

#8 汉堡图标动画

作者：Rosa；
编码语言：HTML、CSS、JS（jQuery）；

#9 使用 Velocity.js 制作汉堡菜单动画

作者：Filippo；
编码语言：HTML、CSS（Less）、JS（jQuery + Velocity.js）；

#10 原子汉堡菜单 CSS

作者：Alex Coven；
编码：HTML、CSS；

...

➡️在我的博客上查看其余表格❤️