这个 CSS 库竟能帮你做汉堡？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了这个 CSS 库竟能帮你做汉堡？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2128字，纯文字阅读大概需要4分钟。

内容图文

美味的 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，可以放心食用！

内容总结

以上是互联网集市为您收集整理的这个 CSS 库竟能帮你做汉堡？全部内容，希望文章能够帮你解决这个 CSS 库竟能帮你做汉堡？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端