Hamburger

Developer
Kevin
Size
2,396 Kb
Views
22,264
  1. Hamburger Previews
  2. Hamburger HTML Codes
  3. Hamburger CSS Codes
  4. Hamburger JS Codes

How do I make an hamburger?

What is a hamburger? How do you make a hamburger? This script and codes were developed by Kevin on 13 October 2022, Thursday.

Hamburger Previews
IQ Test

Hamburger - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hamburger</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hamburger" id="trigger">	<span></span>	<span></span>	<span></span>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hamburger - Script Codes CSS Codes

.hamburger { background-color: transparent; border: 0; outline: 0; width: 60px; height: 100%; position: relative; cursor: pointer; display: block; line-height: 1.35rem; margin: 10em auto;
}
.hamburger span { -webkit-transition: all 0.3s; transition: all 0.3s; height: 10px; width: 100%; display: inline-block; background-color: #e05206;
}
.focus span:first-of-type { -webkit-transform: translate3d(0px, 0px, 0px) rotateZ(45deg); transform: translate3d(0px, 0px, 0px) rotateZ(45deg); -webkit-transform-origin: -5px top; transform-origin: -5px top;
}
.focus span:last-of-type { -webkit-transform: translate3d(0px, 0px, 0px) rotateZ(-45deg); transform: translate3d(0px, 0px, 0px) rotateZ(-45deg); -webkit-transform-origin: 1px bottom; transform-origin: 1px bottom;
}
.focus span:nth-of-type(2) { opacity: 0;
}
.focus span { -webkit-transition: all 0.3s; transition: all 0.3s;
}
.focus span:first-of-type,
.focus span:last-of-type { background-color: #e05206; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; width: 60px;
}

Hamburger - Script Codes JS Codes

$('#trigger').click(function() { $(this).toggleClass('focus');
});
Hamburger - Script Codes
Hamburger - Script Codes
Home Page Home
Developer Kevin
Username gnarfugh
Uploaded October 13, 2022
Rating 3
Size 2,396 Kb
Views 22,264
Do you need developer help for Hamburger?

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!

Kevin (gnarfugh) Script Codes
Name
Columns flex medicare
Sticky nav
React Scoreboard
Hover icon link over image
Vertical rhythm less mixin
Highlight table
Flex dropdown nav
Google Maps api
Fluid Typography
Slider
Create amazing captions 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!