Ahmad Emran

Posted on Aug 25, 2019

Awesome CSS Animation Hamburger Menu

#codepen #javascript #html #css

Awesome Animation CSS Hamburger Menu - HTML5 CSS3 Tutorial

Do Not Forget To Like & Subscribe In The Channel:

Top comments (26)

codelitically_incorrect • Aug 26 '19

Nice but not scaleable. Just try changing the width/height, falls apart, animation and axis alignment no longer looks right.

Paweł Kowalski • Aug 26 '19

It is perfectly scalable.

Just add scale(.5); in line 14 in .wrapper transform and you will have it half the size.

codelitically_incorrect • Aug 27 '19 • Edited

not scaleable with scale(). The element will still take up its original size in the document, so you may need to use negative margins to deal with it, it's a bit inconvenient and hackish to apply negative margins for this case.

Also, does not lend well to a responsive layout. These issues have to be fixed so that width and height can be controller from parent button.

🚩 Atul Prajapati 🇮🇳 • Mar 12 '20

You are totally right brother 👊 this burgers are beautiful but not useful for real website's 🙏😁🌷

codelitically_incorrect • Aug 28 '19

Any plans to correct your design?

Paweł Kowalski • Aug 28 '19

My design? :D

codelitically_incorrect • Aug 29 '19

the structure/css approach

wouterXD • Aug 26 '19

Looks sleak dude! 👏👏

Ahmad Emran • Aug 26 '19

Thanks

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 • Oct 10 '19

I feel like the animation is a little too long to be usable on a live website, but other than that this is a really nice animation!

Dhanushka madushan • Aug 25 '19

This is cool. Do you have codepen link for this code?

Maniflames • Aug 25 '19

If you click on the codepen logo in the upper right it will take you to the webpage. Full link to the pen is codepen.io/ahmadbassamemran/pen/ab...

cheers ✌🏽️

Ahmad Emran • Aug 25 '19

Thanks,
The Source Code link in description below youtube video

Nicholas Finch • Nov 8 '19

Expected a hamburger with lettuce, tomatoe, pickles, cheese, and beef. My disappointment is immeasurable and my day is ruined. I would like a refund.

Maniflames • Aug 25 '19

This animation is so cool, seriously keep it up!

Ahmad Emran • Aug 25 '19

thanks

Greg Brown • Aug 26 '19

Sweet!

Ahmad Emran • Aug 27 '19

Thanks

Chris Bertrand • Aug 26 '19

Very cool

Ahmad Emran • Aug 27 '19

Thanks

Bruno Guirra • Aug 26 '19

Nice job man!

Ahmad Emran • Aug 27 '19

Thanks

z2lai • Aug 28 '19

Man, that's the slickest animation I've seen using just simple spans. How easy is it for you to create these type of animations, does it require a lot of trial and error?