汉堡菜单图标已成为许多网站和web应用程序的一种主食,你是否喜欢他们,他们越来越熟悉和可辨认的UI操作按钮。用户将这个图标与菜单的显示和隐藏,和它的紧凑,节省空间的性质使其成为理想的风格,特别是在较小的屏幕。过去,你可能已经创建或下载一个图标,把它放到你的文档。这是不错,如果你使用 image sprites,那么这将是一个非常简单的实现。
然而今天我们将讲解是是怎样只使用CSS来实现这个著名的汉堡菜单图标。随着手机移动端的体验和交换式网页的动画时代的来临，设计的规范重新兴起，比如Google的设计，用户更多的期望交互式的体验。我们将为图标创造一些精致巧妙的动画，表示他们是可交互的，或者你可以想象这个菜单是可以打开的。这将会使用到极少的js代码。
HTML代码
我们将展示4中示例。对于每种按钮的装饰效果是类似的，每种按钮都有一个共同的class和一个唯一标示的class。每个按钮都是有一个button表情的父元素和一个span表情的内联元素构成。button标签作为容器，可以让我们添加padding和背景。如下面的代码
toggle menu
toggle menu
toggle menu
toggle menu
CSS代码
开始我们会重置按钮的样式，让它没有阴影，边框，默认设置为可见的。我们给按钮定义长和宽（对于动画的部分会用到）。我们需要把文字隐藏了，所以css代码如下：
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background 0.3s;
.c-hamburger:focus {
outline: none;
下面我们需要定义Hamburger图标了
.c-hamburger span {
display: block;
position: absolute;
top: 44px;
left: 18px;
right: 18px;
height: 8px;
background: white;
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background-color: #fff;
content: "";
.c-hamburger span::before {
top: -20px;
.c-hamburger span::after {
bottom: -20px;
样式一： Rotating Icon
这个是最简单的图表，我们只需要设置active
.c-hamburger--rot {
background-color: #28aadc;
.c-hamburger--rot span {
transition: transform 0.3s;
/* active state, i.e. menu open */
.c-hamburger--rot.is-active {
background-color: #166888;
.c-hamburger--rot.is-active span {
transform: rotate(90deg);
样式二：Animate To “X”
这个版本的汉堡图标启动一个“x”通过移动bars顶部和底部的垂直居中图标,然后旋转。我们想要转换“x”发生在顶部和底部的bars搬到中间,
我们用转换延迟实现整体效果。
.c-hamburger--htx {
background-color: #ff3264;
.c-hamburger--htx span {
transition: background 0s 0.3s;
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
.c-hamburger--htx span::before {
transition-property: top, transform;
.c-hamburger--htx span::after {
transition-property: bottom, transform;
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background-color: #cb0032;
.c-hamburger--htx.is-active span {
background: none;
.c-hamburger--htx.is-active span::before {
top: 0;
transform: rotate(45deg);
.c-hamburger--htx.is-active span::after {
bottom: 0;
transform: rotate(-45deg);
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
transition-delay: 0s, 0.3s;
样式三：Animate To Left-Pointing Arrow
在这个版本的图标,整件事旋转180度,顶部和底部bars动画形成一只左向箭头。
.c-hamburger--htla {
background-color: #32dc64;
.c-hamburger--htla span {
transition: transform 0.3s;
.c-hamburger--htla span::before {
transform-origin: top right;
transition: transform 0.3s, width 0.3s, top 0.3s;
.c-hamburger--htla span::after {
transform-origin: bottom right;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
/* active state, i.e. menu open */
.c-hamburger--htla.is-active {
background-color: #18903c;
.c-hamburger--htla.is-active span {
transform: rotate(180deg);
.c-hamburger--htla.is-active span::before,
.c-hamburger--htla.is-active span::after {
width: 50%;
.c-hamburger--htla.is-active span::before {
top: 0;
transform: translateX(38px) translateY(4px) rotate(45deg);
.c-hamburger--htla.is-active span::after {
bottom: 0;
transform: translateX(38px) translateY(-4px) rotate(-45deg);
样式四：Animate To Right-Pointing Arrow
这非常类似于上面的版本,最终除了箭头指向的另一种方法(即向右)
.c-hamburger--htra {
background-color: #ff9650;
.c-hamburger--htra span {
transition: transform 0.3s;
.c-hamburger--htra span::before {
transform-origin: top left;
transition: transform 0.3s, width 0.3s, top 0.3s;
.c-hamburger--htra span::after {
transform-origin: bottom left;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
/* active state, i.e. menu open */
.c-hamburger--htra.is-active {
background-color: #e95d00;
.c-hamburger--htra.is-active span {
transform: rotate(180deg);
.c-hamburger--htra.is-active span::before,
.c-hamburger--htra.is-active span::after {
width: 50%;
.c-hamburger--htra.is-active span::before {
top: 0;
transform: translateX(-8px) translateY(4px) rotate(-45deg);
.c-hamburger--htra.is-active span::after {
bottom: 0;
transform: translateX(-8px) translateY(-4px) rotate(45deg);
需要一点js代码
下面是唯一需要的一点js代码
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
})();
效果参考
http://codepen.io/airen/pen/WvxYLK/
，如若转载，请注明出处：
http://www.zhidao91.com/html-css-js-hamburger-icons/
看完这篇还不够？如果你也在创业，并希望自己的项目被报道，请
戳这里
告诉我们！
