"Hamburger Icons Animations"
Bootstrap 4.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Icons Animations</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></head>
<body>
<h1>Hamburger Icons Animations</h1>
<hr style="width:20%;">
<div class="menuOne">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="menuTwo">
<span></span>
<span></span>
<span></span>
</div>
<div class="menuThree">
<span></span>
<span></span>
<span></span>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{padding:0;margin:0;background:no-repeat #3F51B5;background-image:linear-gradient(#7E57C2 50%,#3F51B5);text-align:center;background-size:100% 100%;height:100%;}
div{margin:10% 30px!important;}
.menuOne,.menuTwo,.menuThree,.menuFour{margin:10px;cursor:pointer;}
h1{color:#fff!important;text-shadow:1px 1px 1px #000;font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;}
.menuOne{width:30px;height:30px;position:relative;transition:.1s;display:inline-block;}
.menuOne span{width:5px;height:5px;background-color:#fff;display:block;border-radius:50%;box-shadow:1px 1px 1px #000!important;}
.menuOne:hover span{transform:scale(1.3);transition:350ms cubic-bezier(.8,.5,.2,1.4);box-shadow:0 2px 3px rgba(0,0,0,.4);}
.menuOne span:nth-child(1){position:absolute;left:0;top:0;}
.menuOne span:nth-child(2){position:absolute;left:12px;top:0;}
.menuOne span:nth-child(3){position:absolute;right:0;top:0;}
.menuOne span:nth-child(4){position:absolute;left:0;top:12px;}
.menuOne span:nth-child(5){position:absolute;left:12px;top:12px;}
.menuOne span:nth-child(6){position:absolute;right:0;top:12px;}
.menuOne span:nth-child(7){position:absolute;left:0;bottom:0;}
.menuOne span:nth-child(8){position:absolute;left:12px;bottom:0;}
.menuOne span:nth-child(9){position:absolute;right:0;bottom:0;}
.clickMenuOne{transform:rotate(180deg);cursor:pointer;transition:.2s cubic-bezier(.8,.5,.2,1.4);}
.clickMenuOne span{border-radius:50%;background-color:rgba(255,189,189,.767);transition:.5s cubic-bezier(.8,.5,.2,1.4);}
.menuEight span,.menuFive span,.menuFour span,.menuSeven span,.menuSix span,.menuThree span,.menuTwo span{background-color:#FFF;border-radius:2px;box-shadow:1px 1px 1px #000!important;}
.clickMenuOne span:nth-child(2){position:absolute;left:6px;top:6px;}
.clickMenuOne span:nth-child(4){position:absolute;left:6px;top:18px;}
.clickMenuOne span:nth-child(6){position:absolute;right:6px;top:6px;}
.clickMenuOne span:nth-child(8){position:absolute;left:18px;bottom:6px;}
.menuTwo{width:35px;height:30px;position:relative;display:inline-block;}
.menuTwo span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);}
.menuTwo span:nth-child(1){width:100%;height:4px;display:block;top:0;left:0;}
.menuTwo span:nth-child(2){width:100%;height:4px;display:block;top:13px;left:0;}
.menuTwo span:nth-child(3){width:100%;height:4px;display:block;bottom:0;left:0;}
.menuTwo:not(.clickMenuTow):hover span:nth-child(1){width:100%;height:4px;display:block;top:-2px;left:0;transition:.3s cubic-bezier(.8,.5,.2,1.4);}
.menuTwo:not(.clickMenuTow):hover span:nth-child(2){width:100%;height:4px;display:block;top:13px;left:0;transition:.4s cubic-bezier(.8,.5,.2,1.4);}
.menuTwo:not(.clickMenuTow):hover span:nth-child(3){width:100%;height:4px;display:block;bottom:-2px;left:0;transition:.3s cubic-bezier(.8,.5,.2,1.4);}
.clickMenuTow span:nth-child(1){left:3px;top:12px;width:30px;transition:.3s cubic-bezier(.8,.5,.2,1.4);transform:rotate(90deg);transition-delay:150ms;}
.clickMenuTow span:nth-child(2){left:2px;top:20px;width:20px;transition:.3s cubic-bezier(.8,.5,.2,1.4);transform:rotate(45deg);transition-delay:50ms;}
.clickMenuTow span:nth-child(3){left:14px;top:20px;width:20px;transition:.3s cubic-bezier(.8,.5,.2,1.4);transform:rotate(-45deg);transition-delay:.1s;}
.menuThree{width:35px;height:30px;position:relative;display:inline-block;}
.menuThree span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);}
.menuThree span:nth-child(1){width:100%;height:4px;display:block;top:0;left:0;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
const menuOne = document.querySelector('.menuOne');
const menuTwo = document.querySelector('.menuTwo');
const menuThree = document.querySelector('.menuThree');
const menuFour = document.querySelector('.menuFour');
const menuFive = document.querySelector('.menuFive');
const menuSix = document.querySelector('.menuSix');
const menuSeven = document.querySelector('.menuSeven');
const menuEight = document.querySelector('.menuEight');
function addClassFunOne() {
this.classList.toggle("clickMenuOne");
}
function addClassFunTwo() {
this.classList.toggle("clickMenuTow");
}
function addClassFunThree() {
this.classList.toggle("clickMenuThree");
}
function addClassFunFour() {
this.classList.toggle("clickMenuFour");
}
function addClassFunFive() {
this.classList.toggle("clickMenuFive");
}
function addClassFunSix() {
this.classList.toggle("clickMenuSix");
}
function addClassFunSeven(){
this.classList.toggle("clickMenuSeven");
}
function addClassFunEight(){
this.classList.toggle("clickMenuEight");
}
menuOne.addEventListener('click', addClassFunOne);
menuTwo.addEventListener('click', addClassFunTwo);
menuThree.addEventListener('click', addClassFunThree);
menuFour.addEventListener('click', addClassFunFour);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Pro
Hamburger Icon Animations
Spinning social icons

Questions / Comments: