JavaScript - How to Create a Responsive Hamburger Menu with HTML, CSS, & JavaScript
Vložit
- čas přidán 28. 08. 2024
- In this tutorial, you'll learn how to create a responsive hamburger menu using HTML, CSS and JavaScript.
Sponsor me on GitHub!
github.com/spo...
Follow my blog:
/ miguelznunez
Email : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/mig...
GitHub : github.com/mig...
In case anyone encounters an error with the JavaScript code not working, remove the script tag inside the tag and add it inside the body right before the tag. That way, the javascript code will be executed after the HTML Document has fully loaded. Your welcome!
Just use "defer"
Yup, that fixed my problem! Thank you!
hey bro in my case its not working . can u help me with that
@@baazigar5 hey bro in my case its not working . can u help me with that
@@trillionairemania7750check your js file name
One of the best tutorials I have seen up until now in JS for a simple dynamic!
Even tho it's a simple topic, some people over complicate their tutorials so much, thank you!!!
Literally the best hamburger tutorial out there hands down. Took me forever to find one where I could understand. Bravo!!
stfu its not
Hello and thank you ! This has helped me a lot. By far the cleanest tutorial and the best explanation. Thank you for giving us such a powerful content. Cant wait to see more from you !
I agree, I've looked at a few others and this is the best one so far. Really useful JS concepts in here too. Thanks Codefoxx!
Genuinely a really big help for my website. I had put off making a popup menu for so long because the last explanation I saw made my head spin. This was easy to digest and easily customizable. Big thanks.
Thanks for this! I searched all over for a simple, straightforward tutorial on making a collapsing navbar/hamburger menu like this, and yours is the best! I appreciate you getting straight to the point.
😅😅😅😅😅😅😅
You have got some way to deliver what no one else can in my many years or self learning. Thank you so much.
Best easy responsive menu tutorial I found after scrolling thro internet for an hour
Of the 1 million Menu tutorials I have seen this is the BEST
🙂
Probably one of the best 😂 stuff, the way you turned hamburger into cross. Appreciable 🌸✨👍
This with hamburger and adding spans blew my mind till now i was just adding font awesome icons, this sure teaches u that you can do awesome things with only basics
very true
Thanks you saved my life from hamburger hell, from now on you're my master you have my subscription.
Great demo. I adapted this for my react site. Adding comment to boost your YT algorithm. :)
Awesome and than you
boost boost
You don't know how much pain I had to make that thing work, and it never worked until I discover this video.
Thank you a lot.
The best video to make a responsive nav bar. Thanks for the video!
This was an amazing tutorial, thank you.
Thanks these has been a very educative tutorial,has helped me as a student doing computer science ,simple brief and direct to the point
Despite how short the video was, the developer did a great job explaining explaining the most important lines of code and why he put them there.
This great tutorial greatly reduced my work load. Great Job.
One small nitpick. As other commenters already said, be sure to mention the JavaScript link in the body. I would suggest taking a couple of seconds at the beginning of the video to show your index page, and point out your CSS link and your JavaScript link for your beginner viewers.
Again, great video and thanks for the help.
My guy, you helped me a lot in javascript, I had a problem with my Responsive Menu, I thank you immensely, because I solved my case, congratulations for the video.
You've just save my life!!!
Thank you very much. Your video was the only one that I understood. I spent my entire weekend trying to learn this menu burger and could not understand it. Your video taught me!
Anytime, im glad i could help
I've learnt alot since I subscribed to this channel, your videos are always comprehensive and precise.
Making the cross was dope ...
You deserve more subscriber...
I just want to say that you are the shit!! Keep it up brother, you'll definitely grow on CZcams doing this stuff, good voice, right pace, great and simple coding (no homo). I rarely comment. and even less subscribe! You earned the subscribe hands-down. I Look forward to seeing more content.
funny story, I spent 30 minutes trying to figure out why JavaScript wasn't working (first time with JS), just to realize that my dumbass didn't do the hamburger class on html, SMH.
peace!🤙
Thank you very much for this tutorial. I am a beginner and it was really well explained which makes it easier to understand.
Thank you sooo much. Been troubling myself with bootstrap all this while when I could have just made mine. This tutorial helped a lot ❤️
Thank you so much. It was indeed helpful.
hi, great tutorial, nicely explain. but I've got a little problem. nothing happens when I click the burger button. I checked the code and everything seems to be right. it just doesn't do anything. any advice?
same
Hi, open your website in Chrome and press F12, there you can see logs. If the button doesn't respont i rec you look at the Action Listener part. Hope it helps :)
that was happening to me, I moved the javascript call to the end of my html file and it worked fine after that
@@alkanpone what should i do to that part
Same issue with me
thankyou! was able to incorporate into my existing code easy and now everything looks so much cleaner to what i was doing before!
No problem, I got you
Thank you, clear and step by step explanation. I was looking for this!❤❤
This was a great tutorial. I was looking for a simple way to add a hamburger menu and this was perfect. Nice and simple and clean. Thank you.
Absolutely
So the hamburger menu button isn't even displaying for 😅😩 any ideas on what to do it's driving me crazy
My Hamburger Menu isn‘t working can anyone help me ?
The best js tutorial that i have ever seen, thanks bro.
was trying to figure out the js to close the hamburger on link click and found it in this video. Thank you!
Yo man great tutorial, best one i've found so far.
I ever seen this kind of clean explation video you made my day, but only thing we need to look into it when we have menu-links than we unable to scroll up & down I request you to check that please make a video on huge menu navigation bar sir....
Greet tutorial, simple and clear.. many thanks for what you are doing man!
I appreciate it 🙏
If i saw this video earlier it could have saved a lot of time
Thank you very much. I was struggling to make my navbar responsive, your video has helped me a lot. It was very easy to follow.
Very simple, clear and straight forward. Yhanks a lot
This video is awesome and so helpful! Little wonder it came tops in my search result.
tysm, this helped me so much, cool vid bro keep up the good work
Damn! You made this look a cake wake for us. New subscriber bro!!
Great video. With some modifications to the code you presented in the video I was able to make a responsive dropdown style menu.
what kind of modifications, if you would like to share? mine's not working
mine's not working too :( @@andersrammbraten5708
If you don't know Java Script at all then you are in trouble, but it's very good to a point.
this was really helpful. thank you for making it so simple for me
Splendid video!! Kudos to you mahn. 😮😅
Cheers man. Nicely put
Great video, well explained and demonstrated, easy to follow understand and implement because the tutorial is so well presented. Thanks! Was a great help.
Thank you! This was super helpful.
The best tutorial
thanks, you enlighted me. it's really hard to find a clear explanation.
This video is very insightful... thank you a lot...I have learned so much from the video
Thank you so much. This really works. 👍
Thus is some great resources. Great work!!!!
Thank you so much for this tutorial!
This was a life saver. Trust me!😅
Thanks man !!! , your video was awesome keep up the good work
Great stuff. Subbed!
Thanks man! I appreciate your all the efforts buddy! you cracked complicated matters in the simplest way. #respect
With the JS file I had to change nav-Menu class to navMenu for the mobile menu to work, and for the class .navbar, use justify-content: space-around, worked best for me to avoid adding padding. Overall great Vid, helped me to get my boiler plate with nav included, now I just change the CSS variables to modify the colors.
Thankyou so much for this. You've earned another subscriber - great video :)
I recommend to not use pixel units, it's better to rely on em and rem
Ok
Not sure why a simple hamburger menu should be the most difficult thing on earth. And all of these youtubers can't make a simple nav bar like this. Hell. So simple and straight to the point, you should teach other tech youtubers how to be simple and straightforward. Phheeeew
Dude all done but in mobile menu i found the transparency.....my hamburger menu is transparent even though i have set background but the down home section items overshadowed it
Wow. It could be this easy? Thank you so much. New subscriber here.
Thank You, this tutorial was so easy to understand. 😁
Thank you so much for a brilliant tutorial!
Hello, you have an excellent way of explaining and your videos are on point and easy to understand !!!
This is very helpful. Thank you for this!!
Awesome, thanks! Liked and subscribed!
simplicity: 💯
understandability: 💯
What a wholesome tutorial, everything worked smoothly sir
beautiful smooth menu, great job! thx for this video
Absolutely!
Simple and straight tutorial.. thank you..
Super clear & brief tutorial - thanks a lot!
Спасибо, все получилось лайк
Easy, and clean, thanks its a great tutorial
Great tutorial! You help me so much. This tutorial was it what i needed.
This is so amazing, thank you so much. It was so easy to follow and understand what you were doing.
Is it working?
@@lazy-hero. it doesnt work for me... (yes i inserted the script link at end of the body) . nav-menu dont appear after clicking on the burger!
thank you for the JS hamburger code (to close it when clicking links) I'm total noob but i finally made my hamburger menu work as intended 👍👍👍
Man thank you so much. this has really helped me. ❤
Excellent! Thank-you
Great Video! This really helped me a lot!
Thank you this is so helpful
Such a good video man, Thank you!
A great video, I thank you. I'm studying IT at University and this has inspired me to go that extra bit.
Good tutorial man 🖤
thanks for this tutorial, it helps me a lot
Solid tutorial
i get the x animation when pressin it but the menu wont show up, help please.
Very Useful
Wow, this is an amazing tutorial
amazing. thank you
Great stuff. Subscribed. 🍻
Thanks for the video it really was helpful
Hi, thank you very much! This video really helped me!!!!
I got you
Hi, quick question, how would you make it move in from the right instead of left? i tried changing the Left:0; in the css to Right:0; and it just doesn't show up
You are a lifesaver
this is great video! thank you sooooo much!