- Published on
6 Easy Ways To Build A Animated Hamburger Menu Icon With Tailwind CSS Without Even Thinking About It
- What is Tailwind CSS?
- The description of Animated Hamburger Menu Icon ui component
- Why use Tailwind CSS to create a Animated Hamburger Menu Icon ui component?
- The preview of Animated Hamburger Menu Icon ui component
- The source code of Animated Hamburger Menu Icon ui component
- How to create a Animated Hamburger Menu Icon with Tailwind CSS?
- Step 1: Create the HTML structure
- Step 2: Style the icon using Tailwind CSS classes
- Step 3: Add the animation using Tailwind CSS classes
- Step 4: Add the click event using JavaScript
- Conclusion
As a FrontEnd technology blogger, it is important to stay up-to-date with the latest trends and tools in the industry. One such tool that has gained a lot of popularity in recent times is Tailwind CSS. It is a utility-first CSS framework that allows developers to quickly build custom designs without writing any CSS from scratch.
In this article, we will explore how to build an Animated Hamburger Menu Icon with Tailwind CSS. We will go through the steps required to create this UI component and why Tailwind CSS is the perfect tool for the job.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that can be used to style HTML elements. It is designed to help developers create custom designs quickly and efficiently without writing any CSS from scratch.
The description of Animated Hamburger Menu Icon ui component
The Animated Hamburger Menu Icon is a popular UI component that is used in many websites and applications. It consists of three horizontal lines that represent a menu icon. When clicked, the lines transform into an X shape to indicate that the menu is open.
Why use Tailwind CSS to create a Animated Hamburger Menu Icon ui component?
Tailwind CSS is the perfect tool for creating an Animated Hamburger Menu Icon because it provides a set of pre-defined CSS classes that can be used to style the icon. This means that developers do not need to write any CSS from scratch, which saves time and effort.
Additionally, Tailwind CSS provides a responsive design system that allows developers to create designs that work on different screen sizes. This is important for the Animated Hamburger Menu Icon because it needs to be visible and functional on both desktop and mobile devices.
The preview of Animated Hamburger Menu Icon ui component
To create an Animated Hamburger Menu Icon with Tailwind CSS, we will use a set of pre-defined CSS classes to style the icon. The result will be a responsive and functional UI component that can be used in any website or application.
Free download of the Animated Hamburger Menu Icon's source code
The source code of Animated Hamburger Menu Icon ui component
To create an Animated Hamburger Menu Icon with Tailwind CSS, we will use a combination of HTML and CSS code. The HTML code will define the structure of the icon, while the CSS code will style it using Tailwind CSS classes.
<div
class="flex min-h-screen min-w-full items-center justify-center bg-gradient-to-b from-sky-100 to-sky-900 p-20"
>
<div class="m-4 grid grid-cols-1 gap-16 sm:grid-cols-3">
<!-- Icon 1 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between transition-all duration-300 group-focus:-rotate-[45deg]"
>
<div
class="h-[2px] w-1/2 origin-right transform rounded bg-white transition-all delay-75 duration-300 group-focus:h-[1px] group-focus:-translate-y-[1px] group-focus:-rotate-90"
></div>
<div class="h-[1px] rounded bg-white"></div>
<div
class="h-[2px] w-1/2 origin-left transform self-end rounded bg-white transition-all delay-75 duration-300 group-focus:h-[1px] group-focus:translate-y-[1px] group-focus:-rotate-90"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 2 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300"
>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all duration-300 group-focus:rotate-[42deg]"
></div>
<div
class="h-[2px] w-1/2 transform rounded bg-white transition-all duration-300 group-focus:-translate-x-10"
></div>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all duration-300 group-focus:-rotate-[42deg]"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 3 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300 group-focus:translate-x-1.5"
>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-150 duration-300 group-focus:w-2/3 group-focus:rotate-[42deg]"
></div>
<div
class="h-[2px] w-7 transform rounded bg-white transition-all duration-300 group-focus:translate-x-10"
></div>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-150 duration-300 group-focus:w-2/3 group-focus:-rotate-[42deg]"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 4 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300 group-focus:-translate-x-1.5 group-focus:rotate-180"
>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-150 duration-300 group-focus:w-2/3 group-focus:rotate-[42deg]"
></div>
<div
class="h-[2px] w-7 transform rounded bg-white transition-all duration-300 group-focus:translate-x-10"
></div>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-150 duration-300 group-focus:w-2/3 group-focus:-rotate-[42deg]"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 5 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300 group-focus:-translate-y-1.5 group-focus:-rotate-90"
>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-150 duration-300 group-focus:w-2/3 group-focus:rotate-[42deg]"
></div>
<div
class="h-[2px] w-7 transform rounded bg-white transition-all duration-300 group-focus:translate-x-10"
></div>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-150 duration-300 group-focus:w-2/3 group-focus:-rotate-[42deg]"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 6 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300"
>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all duration-300 group-focus:translate-x-10"
></div>
<div
class="h-[2px] w-7 transform rounded bg-white transition-all delay-75 duration-300 group-focus:translate-x-10"
></div>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-150 duration-300 group-focus:translate-x-10"
></div>
<div
class="absolute top-2.5 flex w-0 -translate-x-10 transform items-center justify-between transition-all duration-500 group-focus:w-12 group-focus:translate-x-0"
>
<div
class="absolute h-[2px] w-5 rotate-0 transform bg-white transition-all delay-300 duration-500 group-focus:rotate-45"
></div>
<div
class="absolute h-[2px] w-5 -rotate-0 transform bg-white transition-all delay-300 duration-500 group-focus:-rotate-45"
></div>
</div>
</div>
</div>
</button>
</div>
<!-- Icon 7 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300"
>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-100 duration-300 group-focus:translate-y-6"
></div>
<div
class="h-[2px] w-7 transform rounded bg-white transition-all delay-75 duration-300 group-focus:translate-y-6"
></div>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all duration-300 group-focus:translate-y-6"
></div>
<div
class="absolute top-2.5 flex w-0 -translate-x-10 transform items-center justify-between transition-all duration-500 group-focus:w-12 group-focus:translate-x-0"
>
<div
class="absolute h-[2px] w-5 rotate-0 transform bg-white transition-all delay-300 duration-500 group-focus:rotate-45"
></div>
<div
class="absolute h-[2px] w-5 -rotate-0 transform bg-white transition-all delay-300 duration-500 group-focus:-rotate-45"
></div>
</div>
</div>
</div>
</button>
</div>
<!-- Icon 8 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform flex-col items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="-translate-y-5 transform overflow-hidden transition-all duration-150 group-focus:translate-y-3"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 animate-bounce text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
</svg>
</div>
<div
class="flex h-[20px] w-[20px] origin-center -translate-y-3 transform flex-col justify-between overflow-hidden transition-all duration-300"
>
<div
class="mb-1.5 h-[2px] w-7 origin-left transform bg-white transition-all duration-300 group-focus:translate-y-6"
></div>
<div
class="mb-1.5 h-[2px] w-7 transform rounded bg-white transition-all delay-75 duration-300 group-focus:translate-y-6"
></div>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-100 duration-300 group-focus:translate-y-6"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 9 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform flex-col items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="-translate-y-5 transform overflow-hidden transition-all duration-150 group-focus:translate-y-3"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6h-6 h-6 w-6 animate-bounce text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</div>
<div
class="flex h-[20px] w-[20px] origin-center -translate-y-3 transform flex-col justify-between overflow-hidden transition-all duration-300"
>
<div
class="mb-1.5 h-[2px] w-7 origin-left transform bg-white transition-all duration-300 group-focus:translate-y-6"
></div>
<div
class="mb-1.5 h-[2px] w-7 transform rounded bg-white transition-all delay-75 duration-300 group-focus:translate-y-6"
></div>
<div
class="h-[2px] w-7 origin-left transform bg-white transition-all delay-100 duration-300 group-focus:translate-y-6"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 10 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden pt-1 transition-all duration-100 group-focus:rotate-90"
>
<div
class="h-[2px] w-7 transform bg-white transition-all delay-75 duration-300 group-focus:w-0"
></div>
<div
class="h-[2px] w-7 transform rounded bg-white transition-all delay-75 duration-300 group-focus:w-0"
></div>
<div
class="h-[2px] w-7 transform bg-white transition-all delay-75 duration-300 group-focus:w-0"
></div>
<div
class=" h-0 w-0 transform overflow-hidden transition-all delay-150 duration-300 group-focus:-mt-2 group-focus:h-12 group-focus:w-12"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6h-6 h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
</div>
</button>
</div>
<!-- Icon 11 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-500 group-focus:-rotate-180"
>
<div
class="h-[2px] w-7 -translate-x-1 transform bg-white transition-all duration-500 group-focus:rotate-45"
></div>
<div class="h-[2px] w-7 transform rounded bg-white transition-all duration-500 "></div>
<div
class="h-[2px] w-7 -translate-x-1 transform bg-white transition-all duration-500 group-focus:-rotate-45"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 12 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-500 group-focus:rotate-180"
>
<div
class="h-[2px] w-7 -translate-x-1 transform bg-white transition-all duration-500 group-focus:-rotate-45"
></div>
<div class="h-[2px] w-7 transform rounded bg-white transition-all duration-500 "></div>
<div
class="h-[2px] w-7 -translate-x-1 transform bg-white transition-all duration-500 group-focus:rotate-45"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 13 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-500"
>
<div
class="h-[2px] w-7 -translate-x-1 transform bg-white transition-all duration-500 group-focus:-rotate-45"
></div>
<div class="h-[2px] w-7 transform rounded bg-white transition-all duration-500 "></div>
<div
class="h-[2px] w-7 -translate-x-1 transform bg-white transition-all duration-500 group-focus:rotate-45"
></div>
</div>
</div>
</button>
</div>
<!-- Icon 14 -->
<div>
<button class="group relative">
<div
class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4"
>
<div
class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-500"
>
<div
class="h-[2px] w-7 -translate-x-1 transform bg-white transition-all duration-500 group-focus:rotate-45"
></div>
<div class="h-[2px] w-7 transform rounded bg-white transition-all duration-500 "></div>
<div
class="h-[2px] w-7 -translate-x-1 transform bg-white transition-all duration-500 group-focus:-rotate-45"
></div>
</div>
</div>
</button>
</div>
</div>
</div>
How to create a Animated Hamburger Menu Icon with Tailwind CSS?
Now that we have an understanding of what Tailwind CSS is and why it is the perfect tool for creating an Animated Hamburger Menu Icon, let's dive into the steps required to create this UI component.
Step 1: Create the HTML structure
The first step is to create the HTML structure for the Animated Hamburger Menu Icon. We will use three <span> elements to represent the three horizontal lines of the icon.
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
Step 2: Style the icon using Tailwind CSS classes
Next, we will use Tailwind CSS classes to style the icon. We will use the flex and flex-col classes to create a flex container that aligns the three <span> elements vertically. We will also use the w-6 and h-1 classes to set the width and height of the horizontal lines.
<div class="hamburger-menu flex flex-col">
<span class="w-6 h-1"></span>
<span class="w-6 h-1"></span>
<span class="w-6 h-1"></span>
</div>
Step 3: Add the animation using Tailwind CSS classes
Finally, we will add the animation to the icon using Tailwind CSS classes. We will use the transition and transform classes to create a smooth transition between the menu icon and the X shape.
<div class="hamburger-menu flex flex-col">
<span class="w-6 h-1 transition transform"></span>
<span class="w-6 h-1 transition transform"></span>
<span class="w-6 h-1 transition transform"></span>
</div>
Step 4: Add the click event using JavaScript
The final step is to add the click event to the icon using JavaScript. We will use the addEventListener() method to listen for the click event and toggle a CSS class that triggers the animation.
const hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', () => {
hamburgerMenu.classList.toggle('open');
});
Conclusion
In conclusion, building an Animated Hamburger Menu Icon with Tailwind CSS is a quick and easy process that can be done without even thinking about it. With Tailwind CSS, developers can create custom designs quickly and efficiently without writing any CSS from scratch. Additionally, Tailwind CSS provides a responsive design system that allows developers to create designs that work on different screen sizes.