Build a Slide out Hamburger Menu with HTML, CSS & JavaScript
HTML-код
- Опубликовано: 14 янв 2021
- Learn how to build a slide-out hamburger menu using HTML, CSS and JavaScript. We utilise the previous video code and implement the new slide out navigation menu and hamburger button to create a fully working mobile navigation menu.
Previous Video: • Build a Responsive SPA...
Source Code: github.com/TylerPottsDev/SPA-...
// JOIN MY DISCORD
/ discord
// Support me on Ko-Fi
ko-fi.com/tylerpotts
// FOLLOW ME ON TWITTER
/ tyler_potts_
// BECOME A MEMBER
ruclips.net/user/tylerpottsjoin
// MY GEAR FOR CODING AND RUclips
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
Dude, best tutorial in responsive navbars!
by far the best and the most simplest way of creating a slide-out nav menu thank you so so much!!!
Glad it helped!
Thank you tylerr,
hugs from Brazil ♥
One of the best tutorial I found in YT
Wow, thanks!
Tanks for your tutorial, you saved my life at 2 a.m, just a few hours before my presentation for a jury school 🎉 😍 👏🏼
Glad I could help!
Very nice video. I looked around at a few and decided on this one to follow.
Word of advice: when transforming the hamburger to an 'X', the translate operation is tough to work with because you are calling it after the rotation, so the translation axis rotates as well. These functions work in sequence, so it is easier and better results are achieved if you call the 'translate()' function first. The resulting code is simpler as well:
.hamburger.is-active, .hamburger:before {
transform: translate(0px, 11px) rotate(-45deg) ;
}
.hamburger.is-active, .hamburger:after {
transform: translate(0px, -11px) rotate(45deg) ;
}
Thank you for this video, helped me a lot! Very useful and clear explanation 👍🤓
Thank you tylerr ,❤️❤️❤️ this javascript features
Concise. Thank you!
Glad it was helpful!
Very nice video and example ! Great work and presentation again !
Thank you! Cheers!
Me: writes down code
Him: "no, actually im gonna...."
Me: deletes the code
100% clean operation
GOSHHHHH u r amazing my friend. Well done !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thank you! Cheers!
Thank you. So easy to do.
actually you can't hover in mobile but you can by clicking it.
Thank you very much.👍 great work
Thanks for watching, Felix!
Thank you for this ! :)
Great video, thanks for sharing
i recommend using font-awesome for the bars!
Thanks a lot sir...its really helped me to develop my website
thank you) this is awesome))
fascinating. thank you!
Glad you enjoyed it!
awesome !! thank you
You're welcome!
Great video, thanks!
Glad you liked it!
thanks ! for the video loved it
Glad you liked it!
thank you!
Thanks for tip!
Thank you for the tutorial. I'm a bit confused though as to why you would create a secondary nav tag below the header tag. Look at video time line 9:15. Can you explain why you did it that way?
It is for the desktop view.
Great video
Thanks!
Question: How come my values on translates differs from yours? Does that have to do with the container and how that is styled combined with the position in the container? :)
hello your explaination is simply superb
Thanks!
The three bars of the hamburger menu are stacked on top of each other no matter what, increasing the margin just moves them down
You Are The Boss!
Hello, your vscode setup is really cool . Can you share it?
After the menu buttons are clicked, does the menu slide back in?
thanks dad xx
Thank you big bro
You're welcome!
Esta chignon el sitio web, lo usare para mi trabajo... haber que tal queda.... gracias!!
Awesome
after giving postion: fixed; to the menu, my nav-links are not working??
why my bars of the hamburger menu are stacked on top?? any solution?
THANK U!!!!!!!!!!!!!!!!!!!!!!!!!
good day, after applying you code, when i click on the hamburger it toggles open, but when i click on it the second time it doesnt close the menu, why is this sir?
how to add a slider on section banner in this code?
how is your logo and hamburger are still showing after you fully give the .mobile-nav a 100% height and width ??
Yeah I was confused about that too! Mine gets completely blocked.
What VS Code Theme are you using?>
It's Synthwave'84
Hi, thanks for the video
Why did you use *.hamburger:after* and *.hamburger:before* , why not *.bar:after* and *.bar:before* instead?
so you see in .hamburger the content is .bar to get three lines
and in .bar their is no content means if we give .bar::after and .bar::before this will give only two lines
may be that,s the reason
Thanks for the video, but i'm stuck here at the end. If I click a button in mobile nav menu, it don't take me anywhere. I think the navbar should go beck in the it should take me where I want.
same for me. Have you found a solution yet?
how to enable this option to show the time when I was on a given line of code?
git
can anyone tell me what did i do wrong? my hamburger menu works just fine, all the animations works... however there's no X sign when the menu is opened
where could my mistake be?
Hey, Sauler. Sorry for that, I'm not sure how to help but if you want to join my discord I'm sure someone will be able to assist you! There's so many awesome friendly devs who help eachother out :D
I'm having the same issue, did you ever find the solution for this?
@@monicagarcia2592 I had the same issue but then I realized it's because the X was behind the mobile nav. You have to add a higher z-index than the mobile nav and set the position to relative on the ".hamburger.is-active:after " selection in CSS. So the code would be this:
.hamburger.is-active:after {
transform: rotate(50deg) translate(-3px, 2px);
position: relative;
z-index: 100;
}
.mobile-nav {
position: fixed;
z-index: 98;
}
I hope that helps 😄
@@Fkamynk Thank you SO much. I'm going to give this a try. Really appreciate you replying, i was going crazy trying to figure it out
@@monicagarcia2592 lmaoo same!
why don't we use font-awesome for hamburger menu
im trying to make this in react but not working 😓
Pls zoom in on the IDE next time, twas too tiny to watch
I didn’t catch an explanation on ‘is-scrolling’
followed every step to 8:47min and my hamburger doesn't transform, i don't know what could be wrong, someone please help.
Yep had the same issue and its one of two things:
- Having the hamburger/cross as a button can add a "navigable" class by default so even though the JS is correct, the css never kicks in because the button becomes: ".hamburger .navigable .is-active"
- 2nd can be hard to spot and sometimes easy to forget: .querySelector uses the css style class wheras 'toggle' doesnt. I had accidentally added ".is-active" instead of just "is-active" in the toggle.
Hope that helps!
@@daedalus5070 still doesn't fix it for me. What could be the problem
Hey. How did you fix it ?
Привіт з України ! Дякую тобі друже ! Thanks a lot ! Awesome !!
6:28 the code for the burger
It has copyright, or can i use It if i make modifications for My website ?
It's code. Code has no copyright
@@Bastian6071 ok , i just wanted to use It on My website
@@one9959 yeah you can do so
10:49
🔥❤️🔥❤️
Niceeee
Thanks 🤗
My mind was blown....holy shit I didn't you could do that this easily......I was fucking around with if statements when all I could do is classList.toggle. Also that is-active class damn thank you for this video
2nd
Very happy 😍💋 💝💖♥️❤️
Where is the indian accent >:(
I'm Single 😍😥
I thought you were Julian.
your accent is so much confusing😑
Awesome