Table of Contents
Introduction: Of Animated Hamburger Menu in HTML
The concept of an animated hamburger menu has become a staple in modern web design, revolutionizing the way users navigate websites. This sleek and versatile menu, represented by three horizontal lines, has transitioned from a mere navigational aid to a symbol of seamless user experience. Its ability to collapse and expand menus elegantly has made it an essential component in the arsenal of front-end developers.
In this guide, we’ll explore the intricacies of crafting an Animated Hamburger Menu in HTML, CSS, and JavaScript. Understanding the underlying mechanics behind this seemingly simple element delves deeper into the world of front-end development, providing a gateway to creating fluid, user-friendly interfaces.
Easy Steps to Create an Animated Hamburger Menu in HTML:
Begin by creating a New Folder with a Project Name you like, for your project. Then follow these step-by-step guide to create successfully –
Step 1: Constructing & Animating with HTML & JavaScript :
Begin by setting up the foundation. Create an HTML file, perhaps named index.html, and outline the structural elements needed for the animated hamburger menu. Within the file, define the necessary HTML structure comprising a container div housing the three stripes symbolizing the hamburger icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger iocn</title>
</head>
<body>
<div class="btn-wrapper not-active">
<div class="btn-stripe first"></div>
<div class="btn-stripe second"></div>
<div class="btn-stripe third"></div>
</div>
<script>
document.querySelector(".btn-wrapper").addEventListener("click", function () {
if (this.classList.contains("active")) {
this.classList.remove("active");
this.classList.add("not-active");
} else {
this.classList.remove("not-active");
this.classList.add("active");
}
});
</script>
</body>
</html>Subsequently, engage JavaScript to infuse interactivity into the design. The attached JavaScript code orchestrates the toggle between the active and inactive states of the hamburger menu upon a click event. It triggers the transformation animation, dynamically morphing the three stripes into a close icon and vice versa.
Step 2: Styling with CSS :
Moving forward, delve into the aesthetic and interactive aspects of the menu. Utilize CSS to style the menu, altering its appearance, position, and animation effects. The provided style sheet (style.css file) holds the properties governing the menu’s visual attributes.
body { background-color: #8b8b8b; }
.btn-wrapper {
cursor: pointer;
position: absolute;
border-radius: 50%;
width: 120px;
height: 120px;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0.6;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-stripe {
position: absolute;
width: 80px;
height: 10px;
background-color: #fff;
border-radius: 2px;
box-shadow: 2px 2px 2px #414244;
}
.btn-stripe.first {
transition: .2s;
top: 30%;
left: 50%;
transform: translate(-50%, 0);
}
.btn-stripe.second {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
.btn-stripe.third {
top: 62%;
left: 50%;
transform: translate(-50%, 0);
transition-delay: .2s;
transition-duration: .4s;
}
.btn-wrapper.active .btn-stripe.first {
animation: stripeOneActive 1s forwards;
}
.btn-wrapper.active .btn-stripe.second {
opacity: 0;
transition: .5s;
}
.btn-wrapper.active .btn-stripe.third {
animation: stripeThirdActive 1s forwards;
}
.btn-wrapper.not-active .btn-stripe.first {
animation: stripeOneReverse 1s forwards;
}
.btn-wrapper.not-active .btn-stripe.second {
opacity: 1;
transition: .5s;
}
.btn-wrapper.not-active .btn-stripe.third {
animation: stripeThirdReverse 1s forwards;
}
@keyframes stripeOneActive {
0% {
top: 30%;
left: 50%;
transform: translate(-50%, 0);
}
50% {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
100% {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
}
@keyframes stripeThirdActive {
0% {
top: 62%;
left: 50%;
transform: translate(-50%, 0);
}
50% {
top: 50%;
transform: translate(-50%, -50%);
}
100% {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
}
@keyframes stripeOneReverse {
0% {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
50% {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
100% {
top: 30%;
left: 50%;
transform: translate(-50%, 0);
}
}
@keyframes stripeThreeReverse {
0% {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
50% {
top: 50%;
transform: translate(-50%, -50%);
}
100% {
top: 62%;
left: 50%;
transform: translate(-50%, 0);
}
}Conclusion & Final Words:
Mastering the creation of an Animated Hamburger Menu in HTML is a pivotal step in fortifying your web development repertoire. This guide serves as a launchpad, propelling you into the realm of intuitive user interface design. By understanding the intricate fusion of HTML, CSS, and JavaScript, you’ll gain the expertise to craft engaging, responsive menus that captivate and guide users seamlessly.
Experimentation and customization are key. Tweak the provided code, explore different animations, and fine-tune styles to match your project’s aesthetic. The animated hamburger menu stands as a cornerstone, opening doors to further innovations in front-end development.
Embark on this journey armed with newfound knowledge. Soon, your websites will boast captivating, user-friendly interfaces empowered by the magic of animated hamburger menus.
For your benefit, the total source code of this instructional exercise is accessible for download by clicking the Download Code button. Moreover, experience a live exhibit of these Animated Hamburger Menu in HTML by getting to the View Live button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
