Animated Hamburger Menu Tutorial - CSS Effects

👉 Become A VS Code SuperHero Today: vsCodeHero.com
🚢 Deploy for FREE on Vercel: vercel.com/ambassadors/codest...
Get the front-end roadmap for FREE to keep you on track!
courses.codestackr.com/66beed...
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?
Code From This Video: github.com/codeSTACKr/hamburg...
_____________________________________
💻 Visit CodingPhase and get unlimited access to programming courses plus 20% 0FF!!
www.codingphase.com/codestackr
_____________________________________
🛠️ Tools I use:
🟠 Theme: marketplace.visualstudio.com/...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - vsCodeHero.com)
🟠 SuperHero Extension Pack: marketplace.visualstudio.com/...
_____________________________________
💖 Show support!
PayPal: paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - • Web Developer Roadmap ...
Playlist: Web Development For Beginners - • Web Development - Begi...
_____________________________________
Connect With Me:
Website: www.codestackr.com
Twitter: / codestackr
Instagram: / codestackr
Facebook: / codestackr
_____________________________________
** 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: kzbin.info/www/bejne/eHWyq5pqob2Wick 📚 My Favorite Web Design Books 📚 Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link) amzn.to/2JaiCL8

[@abhishekva449]

Hey, how u choose 35 as translate x and y value along with 45 deg rotation?

[@techwithtalha9931]

@Rashed Arman Still wrong, 75200+ subscribers

[@goodluckcollection5663]

@@techwithtalha9931 still wrong 93.1k+

[@kabirbatra]

u mean 100k+

[@CyroCoders]

Actually 145k...

[@SaSha-hb5rq]

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

[@harrynguyen_03]

ur a genius thank u!

[@sumanhaloi5218]

Damn ur good...

[@d-dev888]

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

[@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.

[@MasudRana-nx4rf]

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

[@codeSTACKr]

Thank you for the feedback and support!

[@AntonySimkin]

Man, indeed, this is a very compact, high quality and useful video! Great job!

[@_AtharvaGandhe_MechA]

bro i got "Uncaught Typeerror : menuBtn is null", can you guide me whats wrong

[@TheDevilscrap]

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

[@deja_vuu]

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

[@rsawyer757]

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

[@codeSTACKr]

Thank you for your feedback and support!

[@savioluis7431]

I would like to thank you very much for the roadmap. looking forward to explore more on your blog and youtube videos to learn. Thank you very much for this one, I learnt a lot!

[@codeSTACKr]

More to come!

[@darpananeja4751]

Nailed it man! You are the besttt!!! WIll never forget this!

[@soondar3187]

Checkout this playlist you will find almost every type of navbar kzbin.info/www/bejne/Zme4pYuQpJxrpMk

[@computology2787]

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!!

[@codeSTACKr]

The source code for the video is in the description. Thank you for your feedback and support!

[@Mr34Campbell]

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

[@tiagomota4734]

I wonder, if you dont know what these things are like transition, before and after etc... and you dont know anything about java script....you may be able to do this coz you litteraly copy everything but is there wsomething to actually learn from this other than the exact thing that the guy did ?! lol

[@Exile_fx]

Nice tuttorial buddy, i am now collecting nice navbars for my coding experiences and i will use this in my projects, thank you for nice video with all the explanation

[@Glow0110]

LOVE to quick, straightforward, and impactful video brother!

[@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)?

[@bmehder]

I love the quick how to format.

[@aiktunchannel]

This is really helpful. Not just copy and paste, following your coding and I have learned how it worked. Thanks in Million!!!

[@codeSTACKr]

Great to hear!

[@ro1942]

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

[@codeSTACKr]

Glad it was helpful!

[@ro1942]

@@codeSTACKr :-D

[@tomaslaranjeira6972]

This was very to the point and easy to understand thanks

[@pepepomada4664]

Great tutorial, right to the point and with the sourcecode too! 10/10 Thanks and I will subscribe waiting for more tutorials, there are not a lot of front-end channels that use vanilla javascript instead of jquery.

[@codeSTACKr]

Thank you for your support! More videos on the way..

[@noorainakbarshabbar5158]

Thank you! This really helps.

[@sorenayousefi]

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

[@soewaiyanaung9168]

I want more videos like this. Short and effective.

[@mibreit-photo]

Thanks a lot. That was very helpful and I directly implemented it on my homepage :-)

[@codeSTACKr]

Fantastic!

[@anthonysalameh3960]

dude this is perfect i just got what i was looking for and the explanation is very clear awesome job and no time wasted

[@codeSTACKr]

Glad it helped!

[@victoramorim7650]

Great video bro, helped me a lot!

[@captaincustard2115]

Love the quick videos.....straight to the point and no time wasting 👍

[@codeSTACKr]

Glad to hear it!

[@islamibrahim8121]

wow. this was really informative. like watching a crash course video. I've been searching for a hamburger menu that didn't use font awesome I wanted to know how to scale the menu down to navigation bar size.

[@adeleke5140]

thank you very much. It's succint and straightforward.

[@Vincentvisuals]

Nice and straight forward. Love it!

[@OrincyWhyteDesigns]

Awesome!!!! I hope there is a follow up video 🙂 connecting an actual menu

[@timotheetiotsop698]

perfect speed keep up man!

[@turkiothman9619]

I love it. Thank you. Keep the good work man. :D

[@codeSTACKr]

Thank you!!

[@jovannikolic6346]

Awesome tutorial. I really appreciate this format, straight to the point. Thanks!

[@sergiumalancea9672]

Very easy and simple for beginners, thanks man !

[@bean217]

This was extremely helpful, thank you

[@Frankslaboratory]

Love hamburger animations like this

[@codeSTACKr]

Thank you for your support!

[@abahiduh3246]

wow! this is brief and wonderful

[@salahuddinhissam]

thank you so much, very helpful and fast

[@yogawithcarlos]

Awesome. thanks. Instead of JS I used the with the tags to form the menu lines.

[@yeasirarafat6925]

wow...really in the point!

[@mahendrakumarraichur3409]

It's so cooll...why didn't I stumble on this earlier 🥺? Thanks for the video❤️

[@codeSTACKr]

Welcome!!

[@torsteinstrand7096]

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.

[@carefree_ladka]

Just loved it man. Subscribed to your channel. Thanks for the video

[@codeSTACKr]

Awesome, thank you!

[@rashwanmohamed4545]

thanks that's very helpful!

[@ivang5]

Great video, nice job! Just one thing, in js you don't have to use menuOpen boolean and then check if the value is true or false to add or remove class. You can just use "toggle" instead of "add" and "remove".

[@victoramorim7650]

Thanks, that helped me a lot!

[@shivarammuthukumaraswamy7164]

Thank you so much. Amazing tutorial.

[@gottogaimes2868]

Thanks much for the tut codeSTACKr!! Regarding the tut style: I have a good working knowledge of CSS so the fast pace in here was great. I am somewhat of a noob to Js and struggle a lot. So, if you make any Js related tuts in the future; I am one that would appreciate a more in depth explanation. Excellent vid though, both video and audio are stellar! Thanks again, I've subscribed.

[@codeSTACKr]

Thank you for watching and the feedback!

[@freddy7304]

This was an amazing tutorial ! thank you!

[@codeSTACKr]

Glad you enjoyed it!

[@jeymg]

Reallly liked this fast and cool format! thanks a lot

[@_AtharvaGandhe_MechA]

bro i got "Uncaught Typeerror : menuBtn is null", can you guide me whats wrong

[@jeymg]

@@_AtharvaGandhe_MechA yes, give me your email so i can send you mine and sure i can help you.

[@_AtharvaGandhe_MechA]

@@jeymg bro no worries i solved it, the only problem was that i put tag above div.menu-btn, now that i have changed its location to below it, its working fine, but yeah thanks a lot i appreciate your reply 👍

[@AgrabATC]

Thank you for the vid and effort, but sorry to say that it was extremely quick!

[@hupekyser]

thats what she said

[@abdu9392]

amazing, to the point & exact work. Thank you

[@gnzlplcs]

Thanks, guys! This video saved my homework!

[@adriangonzalez3469]

Awesome video! Now to see how I can use this with nav bar

[@nikolaperjanica2126]

Great video Bro... keep on doing this, you are doing absolutely amazing...can you do a video of making a whole website, step by step, example with all the problems that we can face while making a website,common and not so common problems and mistakes that people make, that wold be so awesome...but not a simple one, website with multiple pages and a little bit of JS, so it is a bit of a challenge... thanks for the amazing videos!!!

[@codeSTACKr]

For sure. I have more advanced videos on the way 😁

[@andykirk1612]

Really well explained, understood it completely, bit of a Eureka! moment, thanks...

[@codeSTACKr]

Glad it helped!

[@timothybeaulieu1366]

I'm trying to create a dropdown menu of links from this hamburger menu setup since that is the point for mobile/tablet. I havn't started learning javascript yet which is why I am struggling with this. Would the javascript stay the same or would this require another video going further? Where would the and fit into all of this for dropdown links and styling purposes with an animated hamburger menu? Otherwise, this video taught me a lot btw!

[@marynakhomenko1369]

Thanks! you explained it perfectly in the right speed 🙏

[@codeSTACKr]

You're welcome!

[@abdinoorahmed44]

great video. thank you for your help.

[@usmanchougule4654]

Good stuff man! Keep it coming!

[@codeSTACKr]

Appreciate it!

[@DJxMaster2]

Wonderful video, helps a lot thanks!

[@pratyushkumar7997]

Please continue to make such incredible short useful videos which are very helpful to make our website look fascinating. Thank You... fan of yours Request- Pls make a video explaining the ::before and ::after elements and also absolute and relative and how do they effect our webpage....would be really appreciative.

[@codeSTACKr]

Those subjects are coming very soon 😁 Thank you for the feedback and support!

[@abasiyat]

Thank you, well explained, easy and very useful. Thank again.

[@codeSTACKr]

You are welcome!

[@jeffbee6090]

Love it! I can watch your short & to the point videos and try it out!

[@bokofineart]

this is beautiful. how do you add it into a bootstrap nav bar? it would be nice to replace the existing svg based hamburgers with something like this.

[@bjarnieinarsson3472]

Very good.. with code and alles!

[@sskdev5116]

This is a very effective way

[@nykowow]

Lenght of video is perfect, thanks!

[@codeSTACKr]

Glad you liked it!

[@kristofbalinth2071]

Suberb video, suberb format-thanks!

[@ChrisEden_83]

Hi - awesome tutorial, still finding my feet with CSS and animations, I was wondering how to go about reducing the space between the burgers? Because it's flex it takes the full height / width of the container? I'm on the scrimba front end course and doing my best to take it all in.

[@ProgrammingwithPeter]

Greatly explained

[@sushant_]

Content that matters only. Thanks Sir.

[@sedoid]

Simple and straight to the point! Nicely Done 👍

[@DelwingManzueta]

awesome - all of your content - keep it up man, i really appreciate your style - love the fast past btw

[@famildoor]

tnx . it was very good . keep up good work

[@Inviso-code]

That's very cool and usefull. Thank you for sharing the idea.

[@babakdorani5914]

Super clean and nice

[@HelloImFranky]

Quick how-to videos = premium life

[@raulemilianomirandagutierr3313]

Thanks!

[@edsonjunior634]

THANKS!

[@devinbetsa9093]

Fantastic video and explanation. Thank you very much!

[@codeSTACKr]

Glad it was helpful!

[@iagosoriano3734]

Tat was great! Thanks a lot

[@codeSTACKr]

Glad you liked it!

[@andrewandrosow4797]

Thanks a lot! The good video!

[@GauravSingh-sv5cw]

Thank you!

[@separatetraveler8226]

Very effective and helpful content. Thanks.

[@codeSTACKr]

Glad it was helpful!

[@jesussinacento]

thanks a lot!

[@YMba-mt6iy]

Very helpful Thanks !!

[@dotsysdev4775]

You are THE GUY !! Than you so much fast and well explained !

[@scarlydesigns]

very cool, thanks for tutorial!

[@codeSTACKr]

You bet!

[@FirdavsiWebDev]

I love that directly to the point. Thank you.

[@codeSTACKr]

Thank you for your support!

[@oscarchirinos1974]

Nice video! How do you caculate the px for translate property?

[@dmytromoroz4451]

Magnificent lesson. Thanks a lot!!!

[@codeSTACKr]

Glad you liked it!

[@rehanashaikh3639]

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 under an

[@maiorov.m]

this button serves another purpose, it's meant to indicate open state, for instance, mobile navigation

[@BerlinUKn0w]

Nice format!

[@codeSTACKr]

Glad you like it!

[@uranium2342]

Thanks bro

[@altimatic2183]

never done code in my life. this is complex! but so cool

[@alexaaa1193]

thanks man!! it looks sick dude. 😎

[@codeSTACKr]

Glad you like it!

[@nielslytzdk]

Very cool tutorial, thanks a million 😁. How do you remove the middle line instead of animating it to the left when clicking?

[@elephant_888]

Love the format! Straight to the point, but you also speak very clearly and explain things without rushing. I’d say you nailed it. 👌🏽👍🏽

[@codeSTACKr]

Thanks!