Animated Hamburger Menu Tutorial - CSS Effects

Подписаться 295 тыс.

Просмотров 508 тыс.

50% 1

👉 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

Наука

Опубликовано:

10 сен 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 454

@codeSTACKr 4 года назад

Just hit 1000 SUBSCRIBERS!! Thank you all so much for all of the support!! Next up Learn Sass in 30 Minutes: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BDOzg4lXcSg.html 📚 My Favorite Web Design Books 📚 Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link) amzn.to/2JaiCL8

@abhishekva449 4 года назад

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

@techwithtalha9931 4 года назад

@Rashed Arman Still wrong, 75200+ subscribers

@goodluckcollection5663 3 года назад

@@techwithtalha9931 still wrong 93.1k+

@kabirbatra 3 года назад

u mean 100k+

@CyroCoders 3 года назад

Actually 145k...

@SaSha-hb5rq 4 года назад

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

@harrynguyen_03 2 года назад

ur a genius thank u!

@sumanhaloi5218 Год назад

Damn ur good...

@patientson 3 года назад

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 4 года назад

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

@codeSTACKr 4 года назад

Thank you for the feedback and support!

@AntonySimkin 3 года назад

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

@_AtharvaGandhe_MechA 2 года назад

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

@d-dev888 4 года назад

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

@TheDevilscrap Год назад

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

@rsawyer757 4 года назад

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

@codeSTACKr 4 года назад

Thank you for your feedback and support!

@deja_vuu Год назад

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

@savioluis7431 4 года назад

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 4 года назад

More to come!

@computology2787 4 года назад

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 4 года назад

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

@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

@darpananeja4751 3 года назад

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

@Mr34Campbell 2 года назад

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

@sorenayousefi 2 года назад

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

@bmehder 3 года назад

I love the quick how to format.

@yogawithcarlos 2 года назад

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

@islamibrahim8121 3 года назад

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.

@tasershoc 4 года назад

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

@Glow0110 2 года назад

LOVE to quick, straightforward, and impactful video brother!

@ivang5 3 года назад

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 2 года назад

Thanks, that helped me a lot!

@torsteinstrand7096 2 года назад

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.

@aiktunchannel 3 года назад

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

@codeSTACKr 3 года назад

Great to hear!

@soewaiyanaung9168 3 года назад

I want more videos like this. Short and effective.

@timothybeaulieu1366 4 года назад

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!

@pepepomada4664 4 года назад

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 4 года назад

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

@tomaslaranjeira6972 Год назад

This was very to the point and easy to understand thanks

@victoramorim7650 2 года назад

Great video bro, helped me a lot!

@noorainakbarshabbar5158 4 года назад

Thank you! This really helps.

@ChrisEden_83 3 года назад

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.

@anthonysalameh3960 3 года назад

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 3 года назад

Glad it helped!

@rehanashaikh3639 4 года назад

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 4 года назад

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

@bokofineart 3 года назад

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.

@OrincyWhyteDesigns 2 года назад

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

@gottogaimes2868 3 года назад

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 3 года назад

Thank you for watching and the feedback!

@ro1942 3 года назад

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

@codeSTACKr 3 года назад

Glad it was helpful!

@ro1942 3 года назад

@@codeSTACKr :-D

@captaincustard2115 4 года назад

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

@codeSTACKr 4 года назад

Glad to hear it!

@sergiumalancea9672 2 года назад

Very easy and simple for beginners, thanks man !

@adeleke5140 4 года назад

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

@Vincentvisuals 2 года назад

Nice and straight forward. Love it!

@mahendrakumarraichur3409 2 года назад

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

@codeSTACKr 2 года назад

Welcome!!

@bean217 2 года назад

This was extremely helpful, thank you

@jovannikolic6346 4 года назад

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

@timotheetiotsop698 3 года назад

perfect speed keep up man!

@mibreit-photo 4 года назад

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

@codeSTACKr 4 года назад

Fantastic!

@abahiduh3246 2 года назад

wow! this is brief and wonderful

@rashwanmohamed4545 2 года назад

thanks that's very helpful!

@adriangonzalez3469 3 года назад

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

@yeasirarafat6925 3 года назад

wow...really in the point!

@turkiothman9619 4 года назад

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

@codeSTACKr 4 года назад

Thank you!!

@kristofbalinth2071 2 года назад

Suberb video, suberb format-thanks!

@DJxMaster2 2 года назад

Wonderful video, helps a lot thanks!

@abdinoorahmed44 3 года назад

great video. thank you for your help.

@gnzlplcs 3 года назад

Thanks, guys! This video saved my homework!

@shivarammuthukumaraswamy7164 3 года назад

Thank you so much. Amazing tutorial.

@abdu9392 2 года назад

amazing, to the point & exact work. Thank you

@carefree_ladka 3 года назад

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

@codeSTACKr 3 года назад

Awesome, thank you!

@salahuddinhissam 3 года назад

thank you so much, very helpful and fast

@babakdorani5914 2 года назад

Super clean and nice

@freddy7304 4 года назад

This was an amazing tutorial ! thank you!

@codeSTACKr 4 года назад

Glad you enjoyed it!

@sskdev5116 3 года назад

This is a very effective way

@Frankslaboratory 4 года назад

Love hamburger animations like this

@codeSTACKr 4 года назад

Thank you for your support!

@andykirk1612 4 года назад

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

@codeSTACKr 4 года назад

Glad it helped!

@pratyushkumar7997 4 года назад

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 4 года назад

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

@oscarchirinos1974 3 года назад

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

@AgrabATC 4 года назад

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

@hupekyser 3 года назад

thats what she said

@bjarnieinarsson3472 Год назад

Very good.. with code and alles!

@famildoor 3 года назад

tnx . it was very good . keep up good work

@nielslytzdk Год назад

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

@usmanchougule4654 4 года назад

Good stuff man! Keep it coming!

@codeSTACKr 4 года назад

Appreciate it!

@nikolaperjanica2126 4 года назад

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 4 года назад

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

@marynakhomenko1369 3 года назад

Thanks! you explained it perfectly in the right speed 🙏

@codeSTACKr 3 года назад

You're welcome!

@Inviso-code 4 года назад

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

@jeymg 2 года назад

Reallly liked this fast and cool format! thanks a lot

@_AtharvaGandhe_MechA 2 года назад

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

@jeymg 2 года назад

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

@_AtharvaGandhe_MechA 2 года назад

@@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 👍

@sushant_ 4 года назад

Content that matters only. Thanks Sir.

@leonlash1770 4 года назад

How did you determine the behavior of translate and rotate on click ? I'm trying to make my own transformation but it is proving very hard. And your video rocked prefer this over css checkbox

@joroh_ 4 года назад

Great videos presentation, I just wanna say that you can do all this using just CSS, for the click event for example you can do a checkbox and display it for none and work with it's label as you like. thank you for the video.

@codeSTACKr 4 года назад

Thanks for the tip! I have another video showing that method as well :)

@raulemilianomirandagutierr3313 3 года назад

Thanks!

@andrewandrosow4797 2 года назад

Thanks a lot! The good video!

@ProgrammingwithPeter 4 года назад

Greatly explained

@jesussinacento Год назад

thanks a lot!

@YMba-mt6iy Год назад

Very helpful Thanks !!

@edsonjunior634 Год назад

THANKS!

@GauravSingh-sv5cw 3 года назад

Thank you!

@nykowow 4 года назад

Lenght of video is perfect, thanks!

@codeSTACKr 4 года назад

Glad you liked it!

@altimatic2183 3 года назад

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

@abasiyat 3 года назад

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

@codeSTACKr 3 года назад

You are welcome!

@HelloImFranky 4 года назад

Quick how-to videos = premium life

@sedoid 4 года назад

Simple and straight to the point! Nicely Done 👍

@032_jatingaur7 2 года назад

nice and informative👌

@infamousgabriel4690 4 года назад

very nice tutorial. clean. quick. straight to the point. Keep it up. But Im having a problem, if I click the button once it would say menubutton open, click it once more "open" disappears, click it the third time and the "open" wont come back.

@FFlover-hd8cp 3 года назад

This is very nice

@uranium2342 Год назад

Thanks bro

@sebastianmolina5201 Год назад

nice fast video :)

@iagosoriano3734 3 года назад

Tat was great! Thanks a lot

@codeSTACKr 3 года назад

Glad you liked it!

@devinbetsa9093 4 года назад

Fantastic video and explanation. Thank you very much!

@codeSTACKr 4 года назад

Glad it was helpful!

@BerlinUKn0w 4 года назад

Nice format!

@codeSTACKr 4 года назад

Glad you like it!

@jeffbee6090 3 года назад

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

@younesbav0up316 3 года назад

thanks a lot, you're doing a great job, i literally copied your code, in it feels great to see the same results in my screen, i only have one problem with measurement i can't picture them in my head and imagine how it going to be displayed in the screen, do you have a tip for that, pls