Responsive HTML & CSS Side Menu From Scratch
HTML-код
- Опубликовано: 20 июн 2017
- 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 
Наука
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
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!
Loved this little practical demo highlighting how effective just a little css knowledge can be, no frameworks needed. Much appreciated, thanks Brad.
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.
Every single topic you cover brad, is plain awesome content!
This was excellent, Brad! You should definitely do more livecoding-type videos like this, in addition to your great slideshow explanations.
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
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!!
Tutorials on responsiveness done with vanilla css are such a nice refreshment!
Yeah Brother you are right
Listen Brother are you working on Web development please contact me on WhatsApp no
I need your help
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!
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!
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.
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!
Thanks man, that means a lot :)
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!!!
The sidebar has always been something that stumped me, definitely going to be using them now.
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.
Thank you @Traversy Media you make understanding HTML and CSS easy to understand keep putting out content like this with this quality.
Thanks a lot man it means a lot to us! We all are looking forward to see more content like this!
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
html and css isn't programming tho???
@@sabertoothwallaby2937 i know. I was mainly referring to his tutorials on vanilla js and php. Damn.....
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!
Loved this, thank you! I am just beginning JS and the little bit of JS in this got me so excited.
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?
nice job Brad - low key, kept it simple, good explanations along every step of the way.
Hey Brad i am really very much thank full, i was literally finding these type of Navbar.
Love from India.
Wow!. I'm very glad to find your channel. Your videos taught me a lot. Thanks.
@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!!!
Doing my best to learn HTML and CSS. I have to admit that these videos help a lot!
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.
Love your videos! Whenever I'm searching for something and I see your logo, I'm like "Yes! Jackpot!"... Lol
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.
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 RUclips! 🔥🔥🔥🔥🔥🔥🔥🔥🔥
Bravo Brad, long waiting for a tutorial on these. thanks. your tutorials are amazing.
For the bigger font size in the editor, Thanks a lot Mr. Brad
Nice and easy to follow along! I like how you explained every step too.
Brad for president
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
Traversy Media lol. That's so true about politicians
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.
Daniel Ad @
Traversy Media q
You Sir, are an absolute legend. Thanks for doing these ! :)
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.
One of the best tutorials I have found thanks man ❤
Thanks for leaving in the issue at 10:40. It was good practice to pause the video and try to debug your code.
Great videos as always, dissecting with clear explanation.!
Your videos are amazing, thanks for taking the time to make them
Im sorry about my comment earlier on, I love your channel. thank you for helping me so much. youve changed your life around
navbahhhh. I love you easy coasters, lots of friends out there. thank you for more content that is always helpful
So glad I found your channel. Thanks for another great video.
Very cool tutorials you have, i'm a subscriber right now!
Awesome instruction. I really need to brush up on my html. This looks great!
thank you from Egypt this is the easiest and smoothest Slide out menu tutorial i've watched
its because the tag is for links and is for writing paragraphs
Great presentation. Clear concise and to the point.
Great Video, thanks for recommending Emmet, will be very useful in my next IT assignment.
Thank you for another great video! I don't care if it's 3 years old, it's timeless!
One word I can say for Brad. He is greatest. Thank you very much.
Thanks brad ..for teaching informative content. Thnks from the bottom of my heart
thank you so much for this easy to follow tutorial. i am really learning a lot from your videos
Thanks your all tutorials are awesome and they help a lot
hey thanks Brad. You are great especially as you explain a you go along!
Thank you so much been looking for this all over
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!
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!
You are awesome . I just discovered you . good job . you are a good teacher
Brad save my thesis, thank you so much man
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
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!
Thanks mate, make more videos like this one :D
Full CSS guide would be great.
Ivan Klaric mdn
Thank you! This was an awesome tutorial and im happy i understood most of it.
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
Excellent Tutorial...thank you Brad!
Great tutorial im 13 and you have managed to explain it perfectly :D
nice one love it
John Paguirigan 🤣🤣🤣🤣🤣
@John Paguirigan Hahahaha!
Another great lesson Brad. Thanks!
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.
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.
This is one of your best tutorial !
A true brogrammer ♥
hahaha :)
brogrammer :) good name, totally going to use it, thanks
brogrammar* nazi
@@TraversyMedia sorry just a question: why my xclose btn, doesn't close when I click on it?
@@benjaminmartin7702 you gotta debug
Great tutorial Brad, thank you!
You explained so well! Thank you 🙏
i'm in love with your videos
I'm so glad I found your channel :D
Ah-mazing! Thank you as always
You saved me so much time! Thank you so much!
Hey Brad love your Videos as always..👍👍
thank you i really enjoyed your teaching....it was really interesting.
Very good tutorial! Helped me a lot! THX!!!
Thanks bro very nice and informative tutorial. keep it up Man
Thanks a lot Brad for another valuable tutorial..
Thanks, can't wait til I'm on your level
I'm a no frills no framewrok kinda guy, and just learning! More vanilla tutorials please!
thanks man you point me to the right direction
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.
Sounds cool. Thanks for watching. How are you liking the bootcamp?
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.
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
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.
I am just wondering why are the list styles under the ul section and not li? I tried to add a drop down menu here but for some reason, it then stops behaving as it should....
great tutorial, you are an excellent instructor
Thank you so much! Is very easy, usefull and simple!
Thanks for the awesome tutorial
this helped me create my cheat sheet
You're awesome Brad
Great job Brad!
Thank you from my heart Brad
I truly feel like iv'e learned more from watching this video than my first month attending Coding Dojo
good stuff, thanks for posting, ill be implementing this on a website im making for someone.
another AWESOME video!! Thank you!
I didn't know that there are BRO-looking devs out there!! ;)
haha, your welcome
Since i came across your channel, i feel relieve. Thanks for this awesome lessons. Please how can i be good like you?
Once is from Brad is a must watch
Excellent video, it help me a lot, thanks♥
The Real mvp is Brad. Respect bruh
the tutorial is very good I like it, it makes learning easier for me.