Hamburger Icon Toggle

Developer
Kevin Haag
Size
2,073 Kb
Views
8,096
  1. Hamburger Icon Toggle Previews
  2. Hamburger Icon Toggle HTML Codes
  3. Hamburger Icon Toggle CSS Codes
  4. Hamburger Icon Toggle JS Codes

How do I make an hamburger icon toggle?

Clickable icon to toggle an open/close animation.. What is a hamburger icon toggle? How do you make a hamburger icon toggle? This script and codes were developed by Kevin Haag on 29 November 2022, Tuesday.

Hamburger Icon Toggle Previews
IQ Test

Hamburger Icon Toggle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hamburger Icon Toggle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <a class="hamburger" href="javascript:;"> <span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span> </a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hamburger Icon Toggle - Script Codes CSS Codes

html, body{ width:100%; height:100%; margin:0; display:table; background:#fff799;
}
.container{ display:table-cell; vertical-align:middle; text-align:center; font:0.875em 'Arial', sans-serif;
}
a.hamburger{ width:32px; height:30px; display:block; margin:0 auto; position:relative;
}
.line{ width:32px; height:6px; display:block; position:absolute; background:#252525; border-radius:2px; -moz-transition: all 0.25s ease-in-out;	-webkit-transition: all 0.25s ease-in-out;	transition: all 0.25s ease-in-out;
}
.line-1{top:0;}
.line-2{margin-top:-3px; top:50%;}
.line-3{bottom:0;}
a.active .line-1{ top:50%; margin-top:-3px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); background:#de2c45;
}
a.active .line-2{opacity:0;}
a.active .line-3{ bottom:50%; margin-bottom:-3px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); -o-transform: rotate(-315deg); transform: rotate(-315deg); background:#de2c45;
}

Hamburger Icon Toggle - Script Codes JS Codes

$( document ).ready(function() { $('.hamburger').click(function() { $(this).toggleClass('active'); return false; });
});
Hamburger Icon Toggle - Script Codes
Hamburger Icon Toggle - Script Codes
Home Page Home
Developer Kevin Haag
Username khaag
Uploaded November 29, 2022
Rating 3.5
Size 2,073 Kb
Views 8,096
Do you need developer help for Hamburger Icon Toggle?

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 Haag (khaag) Script Codes
Name
A Pen by Kevin Haag
Animated Search Icon
Youtube Layout
SVG Fuel Gauge
Scroll Icon
Vertical Centering
Hostwise Nav Bar
Modal Popup Window
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!