Responsive HTML & CSS Side Menu From Scratch

In this video we will build a responsive collapsible side menu using HTML5, CSS3 and just a bit of JavaScript. We will not be using any 3rd party frameworks or libraries, everything is from scratch
CODE: Code for this video
www.traversymedia.com/download...
CHEAP WEB HOSTING: Check out eHost
track.ehost.com/594a594410143/...
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
www.paypal.me/traversymedia
/ traversymedia
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy

[@dailywisdom12]

Good afternoon Brad, I'm from South Africa and I've been stuck with 2 hour tutorials that end up leaving my brain, but since watching this, you broke it down, peace by piece and fit all that into a 23 min video! Feels like I learnt it all within a day. And it's only that short time. Thank you so much

[@JOSEFRESHSOL]

Brad, you have been a great help for me. The way you explain everything, sinks in. Little things you address such as the reason for a "#" or a "." within CSS are the brain busters because it's hardly mentioned. Those little things along with your extensive knowledge and free videos are crucial to designers like myself learning to transform my PS and IL designs to full fledged websites. Thank you!

[@Carl-yu6uw]

Loved this little practical demo highlighting how effective just a little css knowledge can be, no frameworks needed. Much appreciated, thanks Brad.

[@lukeclarke4269]

Hey Brad, your a legend. Thanks for the time you put into making these videos. It means a lot and you have given me inspiration to chase this as a career for me. Ive learnt so much from your videos

[@crocodilecrox3758]

Every single topic you cover brad, is plain awesome content!

[@jenoyestewart1516]

Hey, I'm a beginner, and I have been watching all your videos. I'm thankful for you man. You are a great teacher and I want to say thank you. keep up the good work, I appreciate it.

[@mirzasisic]

Tutorials on responsiveness done with vanilla css are such a nice refreshment!

[@amazingworld4351]

Yeah Brother you are right

[@amazingworld4351]

Listen Brother are you working on Web development please contact me on WhatsApp no I need your help

[@danieladetayo3711]

Brad for president

[@TraversyMedia]

lol, I would get eaten alive by the partisanship. I believe in listening to both sides and forming an intelligent opinion rather than sticking to a team even if it doesn't make sense. Politicians are morons

[@danieladetayo3711]

Traversy Media lol. That's so true about politicians

[@tusharandriyas6647]

politicians, media, and big corporate houses.....like d cogs of a well oiled ferris wheel.....taking commoners for a hell ride made to look like a joy ride.......nd d oil being corruption......but seriously.....love your videos Brad.

[@dayo2114]

Daniel Ad @

[@dayo2114]

Traversy Media q

[@jay3fox]

this was a great tutorial, I am in the middle of doing an End of Module assignment for Uni and this is what I was looking for, thanks!

[@sugarcaneross]

This was excellent, Brad! You should definitely do more livecoding-type videos like this, in addition to your great slideshow explanations.

[@kenilpatel7841]

Even though i do not watch all the videos but i eagerly wait for notifications about uploads from Traversy Media!! Honestly web development seems fun while learning from this channel! Thanx a lot Brad for all these videos...Hoping to see more and more videos from u!!

[@hippigypsi]

I cant even keep up with you anymore.. you are on a roll. I have a request for CSS Grid lessons if you find time to put a crash course together.. An in depth series would be even better! Thanks Brad!

[@PHInfo]

Wow!. I'm very glad to find your channel. Your videos taught me a lot. Thanks.

[@JohnBeau]

The sidebar has always been something that stumped me, definitely going to be using them now.

[@bebesluckyhuman8327]

Loved this, thank you! I am just beginning JS and the little bit of JS in this got me so excited.

[@davidjackson148]

This is awesome, just dropped straight into my project. I was going to do one myself but this has saved me a ton of work. Just got to move it from the left side to the right side. Thanks loads buddy.

[@Z3r0M1st]

Thank you @Traversy Media you make understanding HTML and CSS easy to understand keep putting out content like this with this quality.

[@lav5688]

Hey Brad i am really very much thank full, i was literally finding these type of Navbar. Love from India.

[@emmanueleze3028]

This is my first time of commenting on this channel since i joined and it will definitely not be my last. Been looking everywhere for a good tutorial on this subject until today. After following every step in this video, all i have to say is that you are the BEST tutor EVER. God bless you!

[@TraversyMedia]

Thanks man, that means a lot :)

[@izackom5202]

Brad teaches programming so well that i relate to him more than my teachers who we interact on a daily basis. Thanks a lot Brad

[@sabertoothwallaby2937]

html and css isn't programming tho???

[@izackom5202]

@@sabertoothwallaby2937 i know. I was mainly referring to his tutorials on vanilla js and php. Damn.....

[@jokestream17]

This channel has become one of my favorite tutorial channels in the past few months. Thank you very much for making these videos. By the way, if you don't mind me asking... do you know AWS?? I mean can you do a tutorial series on it?

[@juicynewz]

Bravo Brad, long waiting for a tutorial on these. thanks. your tutorials are amazing.

[@misterz5908]

Thanks a lot man it means a lot to us! We all are looking forward to see more content like this!

[@tangeric]

Love your videos! Whenever I'm searching for something and I see your logo, I'm like "Yes! Jackpot!"... Lol

[@automation_jeff]

nice job Brad - low key, kept it simple, good explanations along every step of the way.

[@JP-mu5er]

MAN YOUR A TRUE LEGEND. EASY TO UNDERSTAND EFFICIENT AND CLEAR VOICE!! WHAT A LEGEND MAN, HTML GET SOO MUCH COOLER WHEN YOU EXPLAIN IT! YOU WON A TRUSTFUL SUBSCRIBER!!!

[@tonihamalainen9757]

Doing my best to learn HTML and CSS. I have to admit that these videos help a lot!

[@tomino133]

You Sir, are an absolute legend. Thanks for doing these ! :)

[@DivineJesusPrayers]

@Brad, You are an awesome teacher period!!! Your intimate mastery of the concepts you teach and the manner you convey them is truly a breath of fresh air! I have learnt a lot from you ... all i can say is - " You are truly a blessing to mankind!!! " Thank You Sir!!!

[@hishamal-gorashi6164]

For the bigger font size in the editor, Thanks a lot Mr. Brad

[@bobans]

Very nice and professional intro with the logo. Bought your Full Stack Web Developer from Udemy, and I have to say I have learned a lot. Keep up the good work.

[@FordExplorer-rm6ew]

I like how you preview each part of this. Html5/CSS/Little bit of vanilla JS, for certain components like nav bar etc. . These make the perfect tutorials for practicing fundamentals and actually knowing what's going on.

[@mr.webdev3700]

Brad explains everything so well, he is a naturally born teacher! It is true he has been teaching for many years and he had time to perfect his methods, but he is definitely one of the best on KZbin! 🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@ashirafzal6771]

One of the best tutorials I have found thanks man ❤

[@sumantkanala]

Great videos as always, dissecting with clear explanation.!

[@FutureAIDev2015]

Nice and easy to follow along! I like how you explained every step too.

[@mohammedmustafa9115]

thank you from Egypt this is the easiest and smoothest Slide out menu tutorial i've watched

[@anselminos5238]

its because the tag is for links and is for writing paragraphs

[@riaznapa]

Since last April Ive been learning web designing in order to find a job in Germany. I dont have any knowledge in IT neither have I ever learned anything else than basic math. I am still struggling to understand the topic but your channel has become an ispiration for me to keep moving. May Allah reward you!

[@Dr.Stein99]

Hi. Thanks for writing informative tutorials. I like how you get right to business woth 15 minutes of personal updates and exvuses for not posting. Your narration is perfect too. Voice is easy to understand in English. Your tutorials helped me as existing programmer to learn the specifics to these functions fast, without the fluff. Thank you very much.

[@subhajitbhattacherjee2655]

Thank you so much been looking for this all over

[@WILDWILLXD]

Thank you for another great video! I don't care if it's 3 years old, it's timeless!

[@iTomAnks]

Your videos are amazing, thanks for taking the time to make them

[@harpreetkaur8806]

Thanks brad ..for teaching informative content. Thnks from the bottom of my heart

[@larrymccall5838]

Great presentation. Clear concise and to the point.

[@birsingh5388]

One word I can say for Brad. He is greatest. Thank you very much.

[@leesnibley]

Awesome instruction. I really need to brush up on my html. This looks great!

[@sibghatullah6840]

Thanks your all tutorials are awesome and they help a lot

[@Joaconstrictor]

So glad I found your channel. Thanks for another great video.

[@JonnyBeoulve]

Thanks for leaving in the issue at 10:40. It was good practice to pause the video and try to debug your code.

[@osempo]

Very cool tutorials you have, i'm a subscriber right now!

[@georgeoliver652]

Great Video, thanks for recommending Emmet, will be very useful in my next IT assignment.

[@Augustheatsucks]

navbahhhh. I love you easy coasters, lots of friends out there. thank you for more content that is always helpful

[@matt52636]

Great tutorial im 13 and you have managed to explain it perfectly :D

[@jabbikawsu6443]

nice one love it

[@dalemoayokunle7330]

John Paguirigan 🤣🤣🤣🤣🤣

[@matt52636]

@John Paguirigan Hahahaha!

[@AdamE2000_]

Im sorry about my comment earlier on, I love your channel. thank you for helping me so much. youve changed your life around

[@omarnazih8529]

i'm in love with your videos

[@ivanklaric4004]

Thanks mate, make more videos like this one :D Full CSS guide would be great.

[@lefortexl4879]

Ivan Klaric mdn

[@benjaminwolke9280]

As always a great tutorial, thanks for that! Just a hint, what might work better: The min-width (for the hidden slide) should be 1 pixel more than the max-width entry (for the hidden nav-bar), else you would show none of them, if the width is exactly 568px.

[@motswedimankwe]

thank you so much for this easy to follow tutorial. i am really learning a lot from your videos

[@catherinehannan5948]

hey thanks Brad. You are great especially as you explain a you go along!

[@PierreZaharakisPhotography]

You are awesome . I just discovered you . good job . you are a good teacher

[@nagahumanbeingzooofparticl8836]

Hey Brad love your Videos as always..👍👍

[@dominikseljan3043]

I'm so glad I found your channel :D

[@saminengkong6204]

Brad save my thesis, thank you so much man

[@NerdyKatsChannel]

Ah-mazing! Thank you as always

[@_Apex]

hey brad absolutely love all of your videos they truly helped me a lot. I was wondering if you could save the file after every line so we could see a live update of what each new addition does

[@7skitchen884]

I truly feel like iv'e learned more from watching this video than my first month attending Coding Dojo

[@patrickcole1119]

Great video showcasing this technique with CSS! Something I've learned recently that has helped is to adjust the JavaScript code to only add or remove CSS classes from the sidebar and main elements. For example: ... × function openSidebar(){ document.getElementById('main').classList.add("state-open"); } function closeSidebar(){ document.getElementById('main').classList.remove('state-open'); } ----- Stylesheet ---- .side-nav { position: fixed; width: 0; ... } .side-nav.state-open { width: 225px; .... } Your stylesheet can then have all the appropriate style code to adjust the width and have transitions as long as the .state-open class is present on both elements. Removing the "style" from the JavaScript code makes it more responsive. In other words you could have a media query for different device sizes that use the same .state-open class and adjust width accordingly. Just a suggestion on another way to approach this. Keep up the excellent content!

[@Jakhongir84]

Great content Brad. I love your channel man. Thanks for what you do. Learning a lot from u. Since u r making small project now, i would be great to see A Contact Form Section with js validation. Thank you!

[@JamesQQuick]

Love it. Thanks as always!

[@rchuhk100]

Excellent Tutorial...thank you Brad!

[@IlemonaJamesAtuluku]

Once is from Brad is a must watch

[@2005Azm]

This is one of your best tutorial !

[@BW-sl6tb]

Great tutorial Brad, thank you!

[@daniekpo]

Great job Brad!

[@nickpaul5080]

Another great lesson Brad. Thanks!

[@IsaacAsante17]

Amazing video as always. Do you get all these tutorial ideas yourself?

[@acidicgenegaming]

You saved me so much time! Thank you so much!

[@eric7758]

The Real mvp is Brad. Respect bruh

[@macavalverde6136]

Excellent video, it help me a lot, thanks♥

[@rarespribac4313]

Thank you! This was an awesome tutorial and im happy i understood most of it.

[@elyasarkin0991]

You explained so well! Thank you 🙏

[@mza1409]

A true brogrammer ♥

[@TraversyMedia]

hahaha :)

[@sivnfrens]

brogrammer :) good name, totally going to use it, thanks

[@iEslam3]

brogrammar* nazi

[@benjaminmartin7702]

@@TraversyMedia sorry just a question: why my xclose btn, doesn't close when I click on it?

[@priyanzhu]

@@benjaminmartin7702 you gotta debug

[@stevostevens2893]

thanks man you point me to the right direction

[@amritvirk484]

Good to see you Brad :)

[@blackbones77]

Nice tutorial thanks Brad. I think "Ctrl+D" should also duplicate a line in Atom, like a good bit of code editors. Saves time on copy/cut & paste actions.

[@Diplomat82]

I'm currently in a boot camp. Literally, I watch your videos while I'm in class EVERYDAY! Today were doing backend. Nodejs, building a form.

[@TraversyMedia]

Sounds cool. Thanks for watching. How are you liking the bootcamp?

[@Diplomat82]

Well, I didn't have much time to do pre-work, I was working a full-time job. So once I quit my job, I may have had 2 weeks of @freecodecamp and youtube tutorials. I knew it wasn't;t going to be enough. I guess I expected the instructor to go into detail about the basics. So the first 4 weeks have been a blur. Monday we started Backend, Node.js etc. Oh yeah, your Node tutorial saved me. We spent 2 weeks on Javascript maybe. I barely know anything. I plan on watching your Javascript for beginners. I've just come to realize this boot camp is like a stepping stone I guess. I won't come out of here with the expectations I had coming in.

[@TraversyMedia]

Well just try and pace yourself. I guess it's not called a bootcamp for nothing. Take from it what you can and keep learning. Glad I could help

[@Diplomat82]

Yup, that's my goal! I've already sent your link to like 10 people in my class in the last week. Keep the vids coming man.

[@mandankoding]

the tutorial is very good I like it, it makes learning easier for me.

[@ankitmehrotra8519]

Thanks a lot Brad for another valuable tutorial..

[@gabornagy6274]

20:49 these moments makes me smile when you don't cut these happens out of your tutorials. Otherwise you are a magician. The God i chose i believe in.

[@anesthetized8]

Very good tutorial! Helped me a lot! THX!!!

[@miathegaymer]

Instead of using SVG tag, you could use ☰ You could then use font-size to scale it and use color: #fff; to make it white. It runs much faster, and it's much more time-efficient. Hope this helps!

[@georgeliss4015]

another AWESOME video!! Thank you! I didn't know that there are BRO-looking devs out there!! ;)

[@TraversyMedia]

haha, your welcome

[@uiuxdevelepor4191]

Since i came across your channel, i feel relieve. Thanks for this awesome lessons. Please how can i be good like you?

[@shraeychikker694]

Really good content! Please make a video/series on how to make a full blown web app/site using php(laravel) or node. Keep the amazing videos coming, man ;D

[@HALOOS]

Thanks, can't wait til I'm on your level

[@birjubasumatary4388]

thank you i really enjoyed your teaching....it was really interesting.

[@hamidcoder]

Thanks bro very nice and informative tutorial. keep it up Man

[@prane81]

Thank you from my heart Brad

[@gomo5628]

Love the bird singing in the background :)

[@johnmunyiri]

You're awesome Brad

[@alvinadyco]

thanks man, you're a lifesaver

[@michaelroraback8318]

great tutorial, you are an excellent instructor