DEV Community

Cover image for Awesome CSS Animation Hamburger Menu

Awesome CSS Animation Hamburger Menu

Ahmad Emran on August 25, 2019

Awesome Animation CSS Hamburger Menu - HTML5 CSS3 Tutorial Do Not Forget To Like & Subscribe In The Channel:
Collapse
 
codelitically_incorrect profile image
codelitically_incorrect

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

Collapse
 
pavelloz profile image
Paweł Kowalski

It is perfectly scalable.

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

Collapse
 
codelitically_incorrect profile image
codelitically_incorrect • 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.

Thread Thread
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

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

Collapse
 
codelitically_incorrect profile image
codelitically_incorrect

Any plans to correct your design?

Thread Thread
 
pavelloz profile image
Paweł Kowalski

My design? :D

Thread Thread
 
codelitically_incorrect profile image
codelitically_incorrect

the structure/css approach

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

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!

Collapse
 
wouterxd profile image
wouterXD

Looks sleak dude! 👏👏

Collapse
 
ahmadbassamemran profile image
Ahmad Emran

Thanks

Collapse
 
tisaconundrum2 profile image
Nicholas Finch

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

Collapse
 
maniflames profile image
Maniflames

This animation is so cool, seriously keep it up!

Collapse
 
ahmadbassamemran profile image
Ahmad Emran

thanks

Collapse
 
dhanushkadev profile image
Dhanushka madushan

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

Collapse
 
maniflames profile image
Maniflames

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 ✌🏽️

Collapse
 
ahmadbassamemran profile image
Ahmad Emran

Thanks,
The Source Code link in description below youtube video

Collapse
 
elbugz profile image
Greg Brown

Sweet!

Collapse
 
ahmadbassamemran profile image
Ahmad Emran

Thanks

Collapse
 
reacthunter0324 profile image
React Hunter

Great!

Collapse
 
chris_bertrand profile image
Chris Bertrand

Very cool

Collapse
 
ahmadbassamemran profile image
Ahmad Emran

Thanks

Collapse
 
brguirra profile image
Bruno Guirra

Nice job man!

Collapse
 
ahmadbassamemran profile image
Ahmad Emran

Thanks

Collapse
 
z2lai profile image
z2lai

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?

Collapse
 
craigdev937 profile image
Craig Johnson

This is fantastic. I love CSS.

Collapse
 
dewofyouryouth_43 profile image
Jacob E. Shore

good times!