这个 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 库竟能帮你做汉堡？相关推荐

整理了二个基本的css库(高手请绕道)
前一阵公司唯一的前端开发人员走掉了,短期内也没人顶上来,所以切页面/js这种活儿只能咱自个儿揽过来了,花了大半天捣鼓了下css,整理了二个基本的css库,方便以后切页面,贴在这里备份说明: p.cs ...
Web 开发中 20 个很有用的 CSS 库
在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做 ...
ckplayer ajax,谁能帮我做一个脚本啊？能让这个网页视频播放可以拉动进度条可以快进...
谁能帮我做一个脚本啊?能让这个网页视频播放可以拉动进度条可以快进 $('.c_type').click(function(){ var data_id = $(this).attr('data-id ...
python无法读取excel文字_Python帮你做Excel——读取Excel文档
相信很多坐在办公室上班的朋友每天都需要处理大量的数据,我们常常用Excel制作电子表格来帮助我们处理它们.这当然是一种非常好的做法,但是我相信大家都会发现,很多表格的内容其实大同小异,常常需要我们把同 ...
html5学生大作业,帮同学做的大一大作业：《我的家乡—郑州》 - 梦涵的帅爸爸...
---恢复内容开始--- 最近在上海上学的一个高中同学让我帮忙,帮她做她们的计算机课程大作业. 由于关系不错我也不好意思拒绝就帮忙做了,因为这个学期刚刚开始接触HTML5和css,所以制作过程中有很多 ...
加js库和css库| jQuery hover()用法 |document.onreadystatechange |get和post
**************************************************************************************************** ...
html图片自动在div里放大,css图片自适应div大小怎么做
css图片自适应div大小怎么做内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性.不管是pc端还是移动端,或者是自适应网站,使用max-wid ...
开源css库_使用CSS和其他开源工具创建标志
开源css库 "创建和发展有关所有类型,其形式和功能的旗帜的知识体系,以及基于该知识的科学理论和原理." -根据国际皮肤病学联合会的定义,对皮肤病学进行定义. 有些国旗是国家的象征 ...
日本公司用人工智能帮人做金融交易
日本公司用人工智能帮人做金融交易 2015-10-31 20:21 中文科技资讯 [大][中][小]我有话说近日,日本人工智能初创公司Alpaca宣布获得100万美元投资,而他们打算用这笔钱来建立一 ...

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

如何使用

更多用法

这个 CSS 库竟能帮你做汉堡？相关推荐

最新文章

热门文章