Hamburger Menu Animation

Developer
Mario Duarte
Size
4,611 Kb
Views
40,480
  1. Hamburger Menu Animation Previews
  2. Hamburger Menu Animation HTML Codes
  3. Hamburger Menu Animation CSS Codes
  4. Hamburger Menu Animation JS Codes

How do I make an hamburger menu animation?

Collection of 6 different animation for the hamburger menu, hope you guys enjoy!. What is a hamburger menu animation? How do you make a hamburger menu animation? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

Hamburger Menu Animation Previews
IQ Test

Hamburger Menu Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hamburger Menu Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="container">	<div class="inner">	<div class="content">	<h1>Hamburger Animation Styles</h1>	</div>	<figure class="js-burger-toggle-colapse-spin">	<div class="inner">	<span></span>	<span></span>	<span></span>	</div>	</figure>	<figure class="js-burger-toggle-colapse-down-spin">	<div class="inner">	<span></span>	<span></span>	<span></span>	</div>	</figure>	<figure class="js-burger-toggle-foldin">	<div class="inner">	<span></span>	<span></span>	<span></span>	</div>	</figure>	<figure class="js-burger-toggle-vortex">	<div class="inner">	<span></span>	<span></span>	<span></span>	</div>	</figure>	<figure class="js-burger-toggle-foldin-out">	<div class="inner">	<span></span>	<span></span>	<span></span>	</div>	</figure>	<figure class="js-burger-toggle-revolve">	<div class="inner">	<span></span>	<span></span>	<span></span>	<span></span>	</div>	</figure>	<div class="content">	<p>	<span><a href="https://twitter.com/MDesignsuk" target="_blank"><i class="fa fa-twitter"></i></a></span>	<span><a href="https://github.com/Mario-Duarte/" target="_blank"><i class="fa fa-github"></i></a></span>	<span><a href="https://bitbucket.org/Mario_Duarte/" target="_blank"><i class="fa fa-bitbucket"></i></a></span>	<span><a href="http://codepen.io/MarioDesigns/" target="_blank"><i class="fa fa-codepen"></i></a></span>	</p>	<p>BY: Mario Duarte</p>	</div>	</div>	</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hamburger Menu Animation - Script Codes CSS Codes

body { margin: 0; padding: 0; font-family: 'Lato', sans-serif; height: 100%; background-color: #eeeeee; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-trasform: translate3d(0, 0, 0);
}
.container { width: 100vw; height: 100vh; position: relative; background-color: #8bc4ea;
}
.container .inner { width: 100%; height: 100%; max-width: 340px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-line-pack: center; align-content: center;
}
.container .inner figure { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; max-height: 80px; cursor: pointer;
}
.container .inner figure .inner { width: 40px; height: 40px; margin: 20px auto; position: relative;
}
.container .inner figure .inner span { position: absolute; top: 0; left: 0; width: 40px; height: 4px; background-color: #ffffff; -webkit-transition: top 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out, -webkit-transform 0.4s ease-in-out; transition: top 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out, -webkit-transform 0.4s ease-in-out; transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out; transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out, -webkit-transform 0.4s ease-in-out; -webkit-transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out; -moz-transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out; -ms-transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out;
}
.container .inner figure .inner span:nth-child(1) { top: 0;
}
.container .inner figure .inner span:nth-child(2), .container .inner figure .inner span:nth-child(4) { top: 18px;
}
.container .inner figure .inner span:nth-child(3) { top: 36px;
}
.container .inner figure.colapse-spin .inner span { -webkit-transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; -webkit-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; -moz-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; -ms-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s;
}
.container .inner figure.colapse-spin .inner span:nth-child(1) { top: 18px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-trasform: rotate(45deg);
}
.container .inner figure.colapse-spin .inner span:nth-child(2) { top: 18px; opacity: 0;
}
.container .inner figure.colapse-spin .inner span:nth-child(3) { top: 18px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-trasform: rotate(-45deg);
}
.container .inner figure.colapse-down-spin .inner span { -webkit-transition: top 0.2s ease-in-out, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; -webkit-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s; -moz-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s; -ms-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s;
}
.container .inner figure.colapse-down-spin .inner span:nth-child(1) { top: 36px; -webkit-transform-origin: left center; transform-origin: left center; transform: rotate(-45deg) translateX(7px); -webkit-transform: rotate(-45deg) translateX(7px); -moz-transform: rotate(-45deg) translateX(7px); -ms-trasform: rotate(-45deg) translateX(7px);
}
.container .inner figure.colapse-down-spin .inner span:nth-child(2) { top: 36px; opacity: 0;
}
.container .inner figure.colapse-down-spin .inner span:nth-child(3) { top: 36px; -webkit-transform-origin: right center; transform-origin: right center; transform: rotate(45deg) translateX(-7px); -webkit-transform: rotate(45deg) translateX(-7px); -moz-transform: rotate(45deg) translateX(-7px); -ms-trasform: rotate(45deg) translateX(-7px);
}
.container .inner figure.foldin .inner span { -webkit-transition: top 0.2s ease-in-out, 0.2s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, 0.2s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, 0.2s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, 0.2s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; -webkit-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, 0.2s ease-in-out 0.2s; -moz-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, 0.2s ease-in-out 0.2s; -ms-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, 0.2s ease-in-out 0.2s;
}
.container .inner figure.foldin .inner span:nth-child(1) { -webkit-transform-origin: right center; transform-origin: right center; transform: rotate(-45deg) translateY(5px); -webkit-transform: rotate(-45deg) translateY(5px); -moz-transform: rotate(-45deg) translateY(5px); -ms-trasform: rotate(-45deg) translateY(5px);
}
.container .inner figure.foldin .inner span:nth-child(2) { opacity: 0;
}
.container .inner figure.foldin .inner span:nth-child(3) { -webkit-transform-origin: right center; transform-origin: right center; transform: rotate(45deg) translateY(-5px); -webkit-transform: rotate(45deg) translateY(-5px); -moz-transform: rotate(45deg) translateY(-5px); -ms-trasform: rotate(45deg) translateY(-5px);
}
.container .inner figure.vortex .inner span { -webkit-transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; -webkit-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; -moz-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; -ms-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s;
}
.container .inner figure.vortex .inner span:nth-child(1) { top: 18px; transform: rotate(405deg); -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-trasform: rotate(405deg);
}
.container .inner figure.vortex .inner span:nth-child(2) { opacity: 0;
}
.container .inner figure.vortex .inner span:nth-child(3) { top: 18px; transform: rotate(315deg); -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-trasform: rotate(315deg);
}
.container .inner figure.foldin-out .inner span { -webkit-transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out 0.2s; -webkit-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out; -moz-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out; -ms-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out;
}
.container .inner figure.foldin-out .inner span:nth-child(1) { -webkit-transform-origin: right center; transform-origin: right center; transform: rotate(-45deg) translateY(5px); -webkit-transform: rotate(-45deg) translateY(5px); -moz-transform: rotate(-45deg) translateY(5px); -ms-trasform: rotate(-45deg) translateY(5px);
}
.container .inner figure.foldin-out .inner span:nth-child(2) { opacity: 0; left: -40px;
}
.container .inner figure.foldin-out .inner span:nth-child(3) { -webkit-transform-origin: right center; transform-origin: right center; transform: rotate(45deg) translateY(-5px); -webkit-transform: rotate(45deg) translateY(-5px); -moz-transform: rotate(45deg) translateY(-5px); -ms-trasform: rotate(45deg) translateY(-5px);
}
.container .inner figure.revolve .inner span { -webkit-transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out 0.2s; -webkit-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out; -moz-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out; -ms-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, left 0.4s ease-in-out;
}
.container .inner figure.revolve .inner span:nth-child(1) { -webkit-transform-origin: center; transform-origin: center; transform: rotateY(90deg); -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-trasform: rotateY(90deg);
}
.container .inner figure.revolve .inner span:nth-child(2) { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-trasform: rotate(45deg);
}
.container .inner figure.revolve .inner span:nth-child(4) { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-trasform: rotate(-45deg);
}
.container .inner figure.revolve .inner span:nth-child(3) { -webkit-transform-origin: center; transform-origin: center; transform: rotateY(90deg); -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-trasform: rotateY(90deg);
}
.container .inner .content { width: 100%; text-align: center;
}
.container .inner .content h1 { color: #eeeeee; font-weight: 300; font-size: 32px; text-transform: uppercase;
}
.container .inner .content p { color: #eeeeee; font-weight: 300; font-size: 14px;
}
.container .inner .content p span > a { font-size: 20px; padding: 0 10px; color: #eeeeee;
}
.container .inner .content p span > a:hover { color: #258cd1;
}

Hamburger Menu Animation - Script Codes JS Codes

$('body').on('click', '.js-burger-toggle-colapse-spin', function(e) {	e.preventDefault();	$(this).toggleClass('colapse-spin');	});	$('body').on('click', '.js-burger-toggle-colapse-down-spin', function(e) {	e.preventDefault();	$(this).toggleClass('colapse-down-spin');	});	$('body').on('click', '.js-burger-toggle-foldin', function(e) {	e.preventDefault();	$(this).toggleClass('foldin');	});	$('body').on('click', '.js-burger-toggle-vortex', function(e) {	e.preventDefault();	$(this).toggleClass('vortex');	});	$('body').on('click', '.js-burger-toggle-foldin-out', function(e) {	e.preventDefault();	$(this).toggleClass('foldin-out');	});	$('body').on('click', '.js-burger-toggle-revolve', function(e) {	e.preventDefault();	$(this).toggleClass('revolve');	});
Hamburger Menu Animation - Script Codes
Hamburger Menu Animation - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 4,611 Kb
Views 40,480
Do you need developer help for Hamburger Menu Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mario Duarte (MarioDesigns) Script Codes
Name
3D Cube - Pure CSS
Flying Bird Animation
Hero Animated Canvas Background
3D Loading Animation
Relative Mouse Position
Pure CSS circonferences
3D Pyramid Animation
Image Comparison Slider
Door Animation
Floating Loading Animation
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!