Build a Slide out Hamburger Menu with HTML, CSS & JavaScript

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

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

50% 1

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
ru-vid.comjoin
// MY GEAR FOR CODING AND RU-vid
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

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

14 янв 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Dude, best tutorial in responsive navbars!

@utkarshverma3314 Год назад

by far the best and the most simplest way of creating a slide-out nav menu thank you so so much!!!

@TylerPotts Год назад

Glad it helped!

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

Thank you tylerr, hugs from Brazil ♥

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

Me: writes down code Him: "no, actually im gonna...." Me: deletes the code

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

One of the best tutorial I found in YT

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

Wow, thanks!

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

Tanks for your tutorial, you saved my life at 2 a.m, just a few hours before my presentation for a jury school 🎉 😍 👏🏼

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

Glad I could help!

@sh9vch9nk0 9 месяцев назад

Thank you for this video, helped me a lot! Very useful and clear explanation 👍🤓

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

Thank you tylerr ,❤️❤️❤️ this javascript features

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

100% clean operation

@knwr Год назад

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) ; }

@mooseydev Год назад

Concise. Thank you!

@TylerPotts Год назад

Glad it was helpful!

@I1Ido. Год назад

actually you can't hover in mobile but you can by clicking it.

@Blue_Pumpkin 5 месяцев назад

Thank you. So easy to do.

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

Very nice video and example ! Great work and presentation again !

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

Thank you! Cheers!

@user-yp1su8ye6z 3 месяца назад

Thank you for this ! :)

@aleksandarrasic4204 Год назад

GOSHHHHH u r amazing my friend. Well done !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@TylerPotts Год назад

Thank you! Cheers!

@I1Ido. Год назад

i recommend using font-awesome for the bars!

@ObjectiveRealityIsKing 4 месяца назад

Great video, thanks for sharing

@vinzanity68 5 месяцев назад

fascinating. thank you!

@TylerPotts 5 месяцев назад

Glad you enjoyed it!

@felixsowah8209 Год назад

Thank you very much.👍 great work

@TylerPotts Год назад

Thanks for watching, Felix!

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

thank you) this is awesome))

@lance740 8 месяцев назад

Great video

@connerdassen7808 9 месяцев назад

The three bars of the hamburger menu are stacked on top of each other no matter what, increasing the margin just moves them down

@mareksamofal3929 4 месяца назад

thank you!

@priyadharshinimuthukumar8970 6 месяцев назад

Thanks a lot sir...its really helped me to develop my website

@stvnk1m Год назад

Thanks for tip!

@skolotoi4588 Год назад

awesome !! thank you

@TylerPotts Год назад

You're welcome!

@minademian Год назад

Great video, thanks!

@TylerPotts Год назад

Glad you liked it!

@gnomocoder2068 Год назад

You Are The Boss!

@CaddekPhotos 4 месяца назад

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

@nox2sweet Год назад

Thanks!

@abiatama 8 месяцев назад

why my bars of the hamburger menu are stacked on top?? any solution?

@whyisthiscodenotworking 5 месяцев назад

thanks ! for the video loved it

@TylerPotts 5 месяцев назад

Glad you liked it!

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

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?

@balkarangrewal3646 Год назад

It is for the desktop view.

@omarruiz5423 2 месяца назад

After the menu buttons are clicked, does the menu slide back in?

@Imran-Desk Год назад

Thank you big bro

@TylerPotts Год назад

You're welcome!

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

Awesome

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

after giving postion: fixed; to the menu, my nav-links are not working??

@total.telugu5503 3 года назад

hello your explaination is simply superb

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

Thanks!

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

thanks dad xx

@hamdikurdi Год назад

Hello, your vscode setup is really cool . Can you share it?

@mikesalinas6245 23 дня назад

Esta chignon el sitio web, lo usare para mi trabajo... haber que tal queda.... gracias!!

@tipografico4477 Год назад

how to add a slider on section banner in this code?

@danielfernandezjaime5014 4 месяца назад

THANK U!!!!!!!!!!!!!!!!!!!!!!!!!

@bazeArttutorials 3 месяца назад

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?

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

Hi, thanks for the video Why did you use *.hamburger:after* and *.hamburger:before* , why not *.bar:after* and *.bar:before* instead?

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

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

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

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?

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

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

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

I'm having the same issue, did you ever find the solution for this?

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

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

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

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

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

@@monicagarcia2592 lmaoo same!

@thewandernationyt Год назад

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.

@Bastian6071 Год назад

same for me. Have you found a solution yet?

@samrad6508 Год назад

how is your logo and hamburger are still showing after you fully give the .mobile-nav a 100% height and width ??

@oldmansam95 10 месяцев назад

Yeah I was confused about that too! Mine gets completely blocked.

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

🔥❤️🔥❤️

@letsplat__ Год назад

What VS Code Theme are you using?>

@raptorvenom7983 Год назад

It's Synthwave'84

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

how to enable this option to show the time when I was on a given line of code?

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

git

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

Niceeee

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

Thanks 🤗

@ShivamKumar-vd1rb 2 месяца назад

why don't we use font-awesome for hamburger menu

@AKSHATmadan_ Год назад

im trying to make this in react but not working 😓

@timifalode5152 Год назад

Pls zoom in on the IDE next time, twas too tiny to watch

@samrad6508 Год назад

10:49

@cjsport1254 10 месяцев назад

I didn’t catch an explanation on ‘is-scrolling’

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

followed every step to 8:47min and my hamburger doesn't transform, i don't know what could be wrong, someone please help.

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

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!

@HayWhy_Pappy Год назад

@@daedalus5070 still doesn't fix it for me. What could be the problem

@HayWhy_Pappy Год назад

Hey. How did you fix it ?

@ethanq2648 Год назад

6:28 the code for the burger

@yuriyzadorozhnyi3849 10 месяцев назад

Привіт з України ! Дякую тобі друже ! Thanks a lot ! Awesome !!

@one9959 Год назад

It has copyright, or can i use It if i make modifications for My website ?

@Bastian6071 Год назад

It's code. Code has no copyright

@one9959 Год назад

@@Bastian6071 ok , i just wanted to use It on My website

@Bastian6071 Год назад

@@one9959 yeah you can do so

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

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