Animated Hamburger Menu Tutorial - CSS Effects

Get the front-end roadmap for FREE to keep you on track!

In this video, I'll show you how to make a cool animated hamburger menu with CSS. We will use a little JavaScript as well but it will be very simple.

Let me know what you think of this short and to-the-point video format. Would you rather me take more time to explain?

_____________________________________

💻 Visit CodingPhase and get unlimited access to programming courses plus 20% 0FF!!
_____________________________________

🛠️ Tools I use:
_____________________________________

💖 Show support!
_____________________________________

Watch Next:
_____________________________________

Connect With Me:
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #CSS #learntocode

[codeSTACKr]

Just hit 1000 SUBSCRIBERS!! Thank you all so much for all of the support!!

Next up Learn Sass in 30 Minutes:

📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)

[MasudRana-nxrf]

This is very effective. No time waste, just learn how it works.

[SaSha-hbrq]

great tutorial. Btw in the javascript the function for the clip event you can just write:
...('click', () => {

[d-dev]

Thats actually what we need:short, clear and very effective thank you alot.

[Andrei-vcgq]

At around 4:30, you can substitute the listener function with this one instead. It uses toggle instead of calling add/remove and the functionality remains the same. It saves 5 lines of code!

menuBtn.addEventListener('click', () => {


});

[rsawyer]

I dig it. No fluff or over-explaining. Hamburger looks great too

[TheDevilscrap]

For me you got the point, no wasting time just pure content...GREAT JOB !!!!

[tasershoc]

Hi ! I have problems understanding adding :before and :after. Your other burger slices (top and bottom) only rendered after adding content: ' ' and positon: absolute. Can anyone explain why this is so?
I'm also curious as to how you figured out the order with your transform on the ::before and ::after items.
How did you work out that it should be rotate(45deg) first, then translate(35px, -35px)?

[deja_vuu]

This is probably one of the best Tutorials I've ever seen. Thanks for your good Video!

[computology]

The pace is perfect! What you can offer for people is the source code so they can study by themselves along with the video. and you could make a Q&A for each video explaining. Not to have functional(working videos like this one) with theoretical. Great video!!

[sorenayousefi]

One day i was impressed that how devs make this bottuns work, now i make them by myself. Thank u, it worked

[georgesmith]

how did you calculate the 35px, -35px ?

[westernpigeon]

4:01 I'm confused. Doesn't "!menuOpen" mean, "if NOT false, " meaning "if true" why did you do it like "!menuOpen"???

[MrCampbell]

Really loved this quick and right to the point video format! And if I needed to I could just pause or slow down the video

[torsteinstrand]

REACT

Awesome tutorial, and nice and simple animation!

For those of you wanting to implement this in React, you can simply use state for the menu button being open or not opened, and right before the if statement checking if the boolean is true or false (menuOpen), you perform a null-check. This is because when you reference the DOM-element called menu-btn, the first time it will be null until the DOM has rendered.

This might be a very hacky solution, but it's the best one I could think of.

[touchyclips]

I didn't get the last animation on before and after in x direction 35px help!

[rehanashaikh]

hi, so how can i on clicking the hamburger button go to another page that for example shows me the about, contact, address details etc?
meaning on clicking the button it'll take me to about, contact and address as <li> under an <ul>

[patientson]

You are very clear when you describe and briefly explain. Thank you, strength and your experience. It gave me a new way of thinking about structuring and styling.

[tomaslaranjeira]

This was very to the point and easy to understand thanks

[ro]

This is a great format codeSTACKr - simple & concise, exactly what l needed :-)