脑洞真大！这个 CSS 库帮你做汉堡？

美味的 CSS 动画汉堡，要不要尝尝？

大家好，我是鱼皮，今天教大家做汉堡包。

当然不是真的汉堡包，毕竟我们这儿不是美食频道，而是指 HambergurMenu，汉堡包式菜单，由于菜单图标的三条横线酷似一个汉堡包，故得其名。

是不是很像？

为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！

进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如点击 Arrow 菜单图标，三条线会自然变化为箭头图标。

如何使用

该库的使用方式非常简单，由于是纯 CSS 实现，只需引入一个样式文件：

<link href="dist/hamburgers.css" rel="stylesheet">

引入样式文件后，先创建一个汉堡包菜单元素，添加一些特定的类名：

<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

然后从所有汉堡包风格中，选择一款自己喜欢的，再给上述汉堡包元素的最外层（含有 hamburger 类名）添加风格对应的类名，其他子元素保持不变即可。

比如我需要一个点击后折叠的汉堡菜单，对应的类名是 hamburger--collapse，则代码如下：

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

不过此时，汉堡包还不能动，想要激活汉堡折叠动画，还需要再给最外层元素添加 is-active 类名，代码如下：

<button class="hamburger hamburger--collapse is-active" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

美中不足的是，需要我们自行通过 JavaScript 或 jQuery 等方式来动态地添加和删除 is-active 类名，以控制菜单的动画是否生效。不过这也是作者设计如此，希望让读者根据上下文做出最合适的选择。

更多用法

除了这种引入 CSS 文件的使用方式外，Hamburgers 还支持 npm、Bower 等主流的包管理器引入，并且支持 Sass 这一 CSS 扩展语言，甚至还支持 Ruby on Rails！

如果你想要覆盖 Hamburgers 的默认样式，只需要给相同的类名写样式覆盖即可，比如控制内边距：

hamburger-padding-x: 30px;

此外，Hamburgers 完美支持无障碍编程，给元素添加 aria-label 属性即可，具体可参见项目官网。

最后，看下这个库的浏览器兼容性，由于它使用了 CSS3 3D transforms，因此支持除 IE9 和 Opera Mini 外的所有主流浏览器。

目前项目也收获了超过 5000 个 star，可以放心食用！

🔍 项目地址：https://www.code-nav.cn/rd/?rid=17453ede60843d0e04015e05484ef4f5

在 编程导航 中还能发现更多优质编程学习资源，欢迎分享给有需要的同学吧！