Animated Hamburger Menu with Tailwindcss
Tags: javascript, beginners, tutorial, tailwindcss
Published: 2023-04-02 12:43:30

Most developer use svg hamburger menu icon when developing hamburger menu for their frontend web project, in this post i will show you how to build hamburger menu with animation in tailwindcss.

We are to create three horizontal line stacked vertically, to resemble an hamburger. Below is a graphical representation of the hamburger menu with animation.

![Hamburger Menu Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0m1bpi2bgsr5d51d9vs.PNG)


**CSS**
Create two div tags, one outer and the other inner div. we focus on the inner div tag by giving a width of 4rems `w-16`, height `h-2`, background-color `bg-black` and border-radius `rounded-full`. 


![Div Class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qzk49ckj0k2afk4yc6r.PNG)


![Div Width & Height](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhhy94eolcktklbvl3kt.PNG)

The next step will be to create the div pseudo-elements (&::before, &::after). 




To create the div ::before pseudo-element, we write the following tailwindcss utility classes `before:content-[‘’]`, `before:absolute`, `before:w-16`, `before:h-2`, `before:bg-black`, `before:rounded-full`, `before:-translate-y-4`.

![Before Pseudo-Element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhvo3z7nnsu3bzxkidde.PNG)


![Before Pseudo-Element Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh68xw1ylk0u023b2f76.PNG)



For the ::after pseudo element, we copy the code from the ::before pseudo element above, but this time we remove the negative sign from the start of the translate-y-4 tailwindcss utility class: We replace `before:-translate-y-4` with `after:translate-y-4`.


![After Pseudo-Element Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ngfr097xmy9f41ms3rc.PNG)


![After Pseudo-Element Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqbickael9e7qopv3sjw.PNG)




**JavaScript**
We add an id to our outer div to enable us have a mouseEvent (click) and have a reference to the outer div.


![Outer div id](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gblvn47ccla4vxr06ryy.PNG)


![JavaScript Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzu9izqvhytfe8xqfota.PNG)



We add the following tailwindcss utility class to be applied to the hamburger-toggle class: `[&>div]:h-0 [&>div]:bg-white [&>div::before]:before:translate-y-0 [&>div::before]:before:rotate-45 [&>div::before]:after:translate-y-0 [&>div::before]:after:-rotate-45`


![ToggleMenu Utility Class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w7vmtgun7o4w9c9sjts.PNG)



Finally, we add some transition properties to the div and div pseudo-elements (&::before, &::after) for smooth animation, `transition-all duration-150`, `before:transition-all before:duration-150`, `after:transition-all after:duration-150`.


![Full Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wibnzzrfsslx0t8ao66.PNG)


![Final Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dotgvqze2zw4sqnproke.PNG)


I hope this tutorial helped you understand how to create an hamburger menu with tailwindcss. If you do not understand the concept and the utility classes of tailwindcss, please visit [tailwindcss](https://tailwindcss.com/) website for better understanding and best practices when using the css framework. 

Here is the link to the hamburger menu code on stackblitz: [click me](https://stackblitz.com/edit/web-platform-bsycn4?file=index.html)