前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >脑洞真大!这个 CSS 库帮你做汉堡?

脑洞真大!这个 CSS 库帮你做汉堡?

原创
作者头像
程序员鱼皮
发布2021-04-25 23:41:03
1.4K0
发布2021-04-25 23:41:03
举报
文章被收录于专栏:鱼皮客栈

美味的 CSS 动画汉堡,要不要尝尝?

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

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

是不是很像?
是不是很像?

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

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

如何使用

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

代码语言:txt
复制
<link href="dist/hamburgers.css" rel="stylesheet">

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

代码语言:txt
复制
<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

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

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

代码语言:txt
复制
<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

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

代码语言:txt
复制
<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 的默认样式,只需要给相同的类名写样式覆盖即可,比如控制内边距:

代码语言:txt
复制
hamburger-padding-x: 30px;

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


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

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

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 如何使用
  • 更多用法
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档