Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >脑洞真大!这个 CSS 库帮你做汉堡?

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

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

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

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

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

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

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

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

如何使用

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

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

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

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

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

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

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

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

代码语言:txt
AI代码解释
复制
<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
AI代码解释
复制
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 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
我至今没想到,我也能在 CSS 中实现 SVG 动画了
动画是网络中不可或缺的一部分。与互联网早期使用 GIF 图像不同,现在的动画更加细腻和高雅。设计师和前端开发者利用动画使网站看起来更加精致,不仅提升用户体验,还吸引用户关注重要的元素,以传达信息。
前端修罗场
2023/10/07
1.6K0
一步步教你用CSS添加SVG过滤器[每日前端夜话0x47]
自21世纪初以来,SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。
疯狂的技术宅
2019/04/23
3K0
一步步教你用CSS添加SVG过滤器[每日前端夜话0x47]
每天一个小技巧:变形汉堡按钮(Hamburger Menu) HTMLCSSJS
汉堡按钮(Hamburger menu)常用于移动端网站 展开/收起 导航,如果在点击按钮时再增加一些过渡动画则会显得更加生动有趣。今天我们就快速实现一个带有过渡动画的汉堡按钮。效果如图:
MudOnTire
2020/07/08
1.9K0
2019-08-07 新手帮助的实现
新手帮助.gif 安装driver.js cnpm install driver.js -s 引入 import Driver from "driver.js" // 引入插件 import "driver.js/dist/driver.min.css" // 引入插件 import steps from "./dd" // 引入步骤 创建一个js文件,用于存放 step的提示, 内容如下 // 通过绑定元素 类名,id名的形式来 执行步骤, 注意第一个对象要写两次。 con
用户4344670
2019/08/28
1.3K0
2019-08-07 新手帮助的实现
Bootstrap实战 - 响应式布局
响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
除除
2022/01/11
4.9K0
Bootstrap实战 - 响应式布局
BootStrap应用开发学习入门1
什么是字体图标? 答:字体图标是在 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。
全栈工程师修炼指南
2020/10/23
45.6K0
BootStrap应用开发学习入门1
Bootstrap实用手册
Responsive Web Page,响应式网页/自适应网页,即一个页面既可以在 PC 浏览器中浏览,也可以在手机、平板中浏览,并且配合不同设备有不同的响应结果,响应式网页的特点:
越陌度阡
2020/11/26
6.4K0
【CSS——效果实现】自适应页面(蓝桥杯真题-5136)【合集】
请通过补全 css/style.css 中代码或操作 DOM 的方式,达到根据屏幕大小显示不同布局的效果。
Rossy Yan
2025/02/18
3180
【CSS——效果实现】自适应页面(蓝桥杯真题-5136)【合集】
动手练一练,做一个现代化、响应式的后台管理首页
作为一个前端开发者,我们或多或少都会接触后台管理系统的制作,你是否会亲自动手做还是从网上找源码改一个呢?今天我们将从零开始纯手工制作一个后台管理面板的首页,通过这个案例的学习你将会学习到如何制作一个响应式后台管理页面的思路,本篇文章内容比较长,请大家多多包涵,希望你能看下去,😁😁😁。 这篇文章的内容是基于我阅读国外一篇博文内容的整理,并非完全直接翻译,由于水平有限,难免有限疏漏,欢迎大家指正 一、 首先明确下界面需求 1、屏幕宽度 >767px 时,界面交互如下视频所示: 界面的菜单可以通过点击左下角
前端达人
2020/03/05
1.1K0
动手练一练,做一个现代化、响应式的后台管理首页
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
.img-responsive:直接为图片添加该样式,可以实现响应式图片。 .center-block:图片居中样式,而不能使用text-center样式。 图片形状样式:.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)
谙忆
2021/01/21
2.7K0
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
2020年网站首屏设计:最佳实践和例子
首屏在网站的设计中起着非常关键的作用,它奠定了网站整体的基调。 特别是极简主义盛行的这个时代,各种花里胡哨的东西往往不被看好。所以有时没有其他东西可以吸引眼球,网站首屏设计就变得更加重要。
奔跑的小鹿
2020/05/28
2.1K0
2020年网站首屏设计:最佳实践和例子
前端(二)-CSS
border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
化羽羽
2022/10/28
2K0
05_CSS进阶技巧
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
张哥编程
2024/12/13
1280
Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态
像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改,导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷新导航菜单样式。后续类似的组件状态共享还会有许多。为了解决组件间状态的共享,增加组件交互的易用性,我们引入 vuex 专门管理应用状态。
朝雨忆轻尘
2019/06/19
2K0
Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态
vue3 + elemenplus实现导航栏
今天实现一下导航栏。文章开始前先新建几个文件夹,用于一会儿存放我们的代码。(使用vite创建)。
用户4793865
2023/01/12
9.8K1
vue3 + elemenplus实现导航栏
Bootstrap框架的简单使用
Bootstrap 是由 Twitter 公司开发维护的简洁、直观、强悍的前端开发 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果,让web开发更迅速、简单。
岳泽以
2022/10/26
3.9K0
Bootstrap框架的简单使用
20 个让你效率更高的 CSS 代码技巧
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。
苏南
2020/12/16
6070
20 个让你效率更高的 CSS 代码技巧
这15个HTML/CSS错误我不信你没犯过(网站规范)
之前帮我朋友检查他们的HTML/CSS项目时注意到一些错误在项目中重复出现。所以我决定写这篇文章,这样大家就可以对照检查你是否也会犯同样的错误。希望看完这篇文章对您有所帮助。
海拥
2021/08/23
3.5K0
这15个HTML/CSS错误我不信你没犯过(网站规范)
动手练一练,做一个现代化、响应式的后台管理首页
大家好,今天我们将一起从零开始纯手工建一个后台管理首页。关于后台管理模板,每个公司的要求都不一样,有的能用就行也丑不丑无所谓,或者用个开源模板凑合下就行啦。如果接到这样后台管理需求,我也是从网上下载改改而已,从没想过自己动手建一个。因为从零开始建一个漂亮完善的后台管理模板实在太费功夫了,交互样式的代码量不亚于业务代码的工作量。
前端达人
2020/02/29
1.1K0
动手练一练,做一个现代化、响应式的后台管理首页
CSS面试题总结[通俗易懂]
一般的我们所说的width、height都是指标准盒子模型下的width(也就是content)。
全栈程序员站长
2022/08/23
8880
CSS面试题总结[通俗易懂]
相关推荐
我至今没想到,我也能在 CSS 中实现 SVG 动画了
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档