Hamburger Menu Icon

Developer
Isac Fadoni
Size
2,768 Kb
Views
44,528
  1. Hamburger Menu Icon Previews
  2. Hamburger Menu Icon HTML Codes
  3. Hamburger Menu Icon CSS Codes
  4. Hamburger Menu Icon JS Codes

How do I make an hamburger menu icon?

Another hamburger menu icon made with CSS & a little bit of JavaScript. :P. What is a hamburger menu icon? How do you make a hamburger menu icon? This script and codes were developed by Isac Fadoni on 13 June 2022, Monday.

Hamburger Menu Icon Previews
IQ Test

Hamburger Menu Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hamburger Menu Icon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="hambbutton"> <a href="#"> <span></span> </a> </div>
</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 Menu Icon - Script Codes CSS Codes

body { background: #22F5B9;
}
a:focus { outline: 0;
}
.container { display: block; position: absolute; width: 500px; height: 500px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.hambbutton { display: block; position: relative; width: 120px; height: auto; /* outline: 1px solid black; */ left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.hambbutton a { display: inline-block; position: relative; width: 120px; height: 120px; -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hambbutton a.animate { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);
}
.hambbutton a:hover span { width: 120px;
}
.hambbutton a:hover span:after { width: 120px;
}
.hambbutton a span { display: inline-block; position: relative; width: 100px; height: 20px; background: #414141; top: 50%; border-radius: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hambbutton a span.back { width: 120px;
}
.hambbutton a span.back:before { width: 80px; -webkit-transform: translateY(7px) translateX(-3.5px) rotate(-40deg); transform: translateY(7px) translateX(-3.5px) rotate(-40deg);
}
.hambbutton a span.back:after { width: 80px; -webkit-transform: translateY(-7px) translateX(-3.5px) rotate(40deg); transform: translateY(-7px) translateX(-3.5px) rotate(40deg);
}
.hambbutton a span:before { display: inline-block; position: absolute; content: ''; width: 120px; height: 20px; top: -30px; border-radius: 10px; background: #414141; -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hambbutton a span:after { display: inline-block; position: absolute; content: ''; width: 80px; height: 20px; top: 30px; border-radius: 10px; background: #414141; -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Hamburger Menu Icon - Script Codes JS Codes

hamb = $('.hambbutton a');
hamb.on('click', function(e) { e.preventDefault(); $(this).toggleClass('animate'); $('span').toggleClass('back');
});
Hamburger Menu Icon - Script Codes
Hamburger Menu Icon - Script Codes
Home Page Home
Developer Isac Fadoni
Username isac
Uploaded June 13, 2022
Rating 3
Size 2,768 Kb
Views 44,528
Do you need developer help for Hamburger Menu Icon?

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!

Isac Fadoni (isac) Script Codes
Name
Unfolding Post
PayPal Logo
Eyedropper CSS
Material Design Login Form
React Template
Unfolding Post v2
Circle to Rectangle Card Transition
A Pen by Isac Fadoni
ES2015 Notification Plugin
Dribbble to Code
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!