HomeНаука и техникаRelated VideosMore From: Traversy Media

Responsive HTML & CSS Side Menu From Scratch

4088 ratings | 177287 views
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 http://www.traversymedia.com/downloads/sidemenu.zip CHEAP WEB HOSTING: Check out eHost http://track.ehost.com/594a594410143/click SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.linkedin.com/in/bradtraversy
Html code for embedding videos on your blog
Text Comments (341)
Mitja Grega (1 day ago)
Thx bro you are the best! But I have only one problem. I working in sublime text and when it comes to the function openSlideMenu style and width recognized like ordinary text not some function... what did I do wrong? Missed some package?
Toby Henderson (8 days ago)
Hmm I was wondering how to use smooth scrolling links after Nav bar pops out cant figure it out yet.
Tim Ott (9 days ago)
Anybody know how to stop the content from moving over when the menu pops out? I'd prefer it to just cover the content while it's out.
Carl (11 days ago)
Loved this little practical demo highlighting how effective just a little css knowledge can be, no frameworks needed. Much appreciated, thanks Brad.
Birju Basumatary (12 days ago)
thank you i really enjoyed your teaching....it was really interesting.
Ashraful Fuad (17 days ago)
So much helpful for begineer
nora (20 days ago)
I am very lucky because I know your channel .I learnt alot from you. I hope to make many videos about work as programming in any company from when client came to make website to finish it. You talk about how are we thinking to make website ?and what steps that we follow to make it.
Akbar Shaikh (24 days ago)
very nice concept very helpful thanks
RqndomGamerz (24 days ago)
not working the sidebar menu is half out always when i press the buttons nothing happens pls help(edit)Now i fixed something but when i press the menu button it doesnt work help.The menu btn, redirects me to #
Jeff Ribyat (28 days ago)
nice job Brad - low key, kept it simple, good explanations along every step of the way.
Thomas Neos (29 days ago)
I created a collapsible nav menu using Bootstrap with your help but as soon as i uploaded my files to the server it didn't work. I downloaded Bootstrap on my laptop so I had to change the link as soon as online. I used those links online instead <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> Do you think that was the issue? Thank you
Irene Milhorn (1 month ago)
Great video dude! Thanks!
Lagu Stephen (1 month ago)
Yeah man, you always the best!
sairaj palath (1 month ago)
Hi guys , need help I only want the stroke button in mobile size and not in desktop size. What to do?
Kurt Harvey (1 month ago)
hi guys, i just need some help because i finished the video and did just what it said so but my problem is that the slide menu appears in the middle and the "responsive slide menu" text doesnt slide when i open the slider, it thought it would be fixed if i removed the "responsive slide menu" text but it didnt fix my problem, the text is just removed but the slider still appears in the middle. i hope i can get some help here bacause im a beginner in coding and i cant fix this problem because i cant find whats wrong
Nicolai Juulsager (1 month ago)
Hi Brad. Thx for your help - it works perfectly! But I want to hear if its possible to place the side-bar icon to the right. I know how to move the sidebar to the right, but not the icon.
Ricardo Bautista (2 months ago)
http://entendy.com/ - Just finished building a tool for Youtuber's with this exact code! Thank you! It is a Subscribe Link Generator!
Jae R. Royal (2 months ago)
you just made my life a whole lot happier lol
Myles Gmail (2 months ago)
reynan delizo (2 months ago)
Amazing tutorial. Good design and good code. Thank you! I will watch your other video. Do you have a book or website teaching web design and web developing to beginner level?
piano0011 Lee (2 months ago)
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....
piano0011 Lee (2 months ago)
Is there a way to save a file from inkscape and then use this in sublime text?
Oscar Garcia (2 months ago)
This still needs a function that closes the side menu when a link is clicked.
Keytron Quabius (2 months ago)
You could do an animation transition on margin without it thrashing the layout? I thought that was one of those things that you can't do? https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Osempu (3 months ago)
Very cool tutorials you have, i'm a subscriber right now!
Jason33784 (3 months ago)
Just What I Needed
Lakmal Sampath (3 months ago)
The best programmer i ever seen.
bobobo boboboo (3 months ago)
moar moar moar moar moar
SamRI (3 months ago)
Instead of using SVG tag, you could use &#9776; 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!
Raita Sorin (3 months ago)
Best in our Planet !
Karloo (3 months ago)
i love you
code first (3 months ago)
<svg width="30" height="30"> <path d="M0,5 30,5" stroke="#ffffff" stroke-width="5"/> <path d="M0,14 30,14" stroke="#ffffff" stroke-width="5"/> <path d="M0,23 30,23" stroke="#ffffff" stroke-width="5"/> </svg>
Pauli Liatto (5 days ago)
+Nicolai Juulsager In CSS apply ".navbar {float: right;}"
Miomir Dujanović (11 days ago)
how to make side menu to be on the right
iTechGaming (11 days ago)
just wt* is that?
Miomir Dujanović (11 days ago)
I want to know that too
Nour Nr (30 days ago)
Thank you this was really helpful, i didn't notice that i wrote "stroke" wrongly
phantom lacaba (4 months ago)
side menu with slide show ? is this possible ?
Dr. Dan Bigs (4 months ago)
How do i get the text in the main div to not leak off the page. It goes too far to the right when the text is too long, and since I have overflow-x hidden on my body, the text cannot be seen.
urbanmaugli sq (4 months ago)
Спасибо! Здорово вышло!
kevin blakely (4 months ago)
'lifesaver!!!!! thanks
Toni Hämäläinen (4 months ago)
Doing my best to learn HTML and CSS. I have to admit that these videos help a lot!
zimotech (5 months ago)
I see hundreds of tutorials showing the same thing over and over, but when it comes to clicking on a menu item they all stop, why is that? Don't they know how to do this??
ashir afzal (5 months ago)
One of the best tutorials I have found thanks man ❤
Dean Dede (5 months ago)
is overflow: hidden, used to disable scroll bars? or does it have any other purpose..iam so confused still with overflow..
Lasiru Maheerathna (5 months ago)
Thank you! This is amazing :)
Joe O Sullivan (5 months ago)
17:42 I think underlines, and all the other "fancy" stuff such as header sizes, are this way so that people with no knowledge of CSS could create a basic webpage. And their links will look like links, headers-> headers etc. Or maybe in case your stylesheet doesn't load. Or maybe so that you can see what's what before you style everything. Still pretty annoying having to change it every time though..
HALOOS (5 months ago)
Thanks, can't wait til I'm on your level
Wassil ALLAL (5 months ago)
nice tutorial , i want to ask if the strock can be changed to dots as homepage google when you clic on google application button, how could it be created. Thanks again <3
Alex Leibowitz (5 months ago)
Very nice. I feel like the transition effect could be a little smoother, however. Not sure how you would fix that.
Stefan Cutajar (5 months ago)
Thanks for giving us good content brad. Anyone experienced problems on mobile nav seems that when you add text and you scroll the page down the nav bar backgroundcolor stops. I tried setting the height to 100vh aswell but it seem like it dosent work on mobile devices eighter
Kaio Felipe R. de Souza (6 months ago)
very nice
The Flawless Forte (6 months ago)
Thank you from Virginia, this is by far the best responsive menu tutorial out there now!
Sean Yap (6 months ago)
I don't understand how changing padding to margin at 20:59 would have any effects on the position of the links. Can anybody explain it to me? thanks
Erich Stein (6 months ago)
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.
Traversy Media may you upload a video talking about how to make a HTML and CSS email for email development?? Please
Ibnul Alam (6 months ago)
Thanks, it works.
Azim Lit. (6 months ago)
This is one of your best tutorial !
Victoria Alexis (7 months ago)
You could just add &#9776; inside a div so you don't have to create a svg.
dinozaur pickupline (7 months ago)
Hi I m looking to make the wobble effect in the sidebar menu when we hover it cascades to the right How can we do that?please
Big Champions (7 months ago)
awesome lesson , respect
Vinh Le (7 months ago)
I'm a no frills no framewrok kinda guy, and just learning! More vanilla tutorials please!
Gábor Móczik (7 months ago)
Would not be a little bit better if you place the sidemenu and content blocks side by side, then if you change the width of the sidememu then the content automatically pushed over without altering it's margin? This allows to style the content margin as per needed without touching the script, and no need for a separate transition you have to sync with the sidemenu's transition. Then adding/deleting a class with the javascriot to the sidemenu like .sideMenuVisible instead of hard coding the number of pixels you want to slide allows you to change the width or any style of the visible sidemenu without modifying the javascript. Probably the CSS would even be shorter! Maybe you don't want to hide it fully, eg. just show icons when compacted and show texts too when expanded.
Owen Hobbs (7 months ago)
I easily made a burger using the code below. HTML: <div class="burger"> <div></div> <div></div> <div></div> </div> CSS: .burger { position: absolute; cursor: pointer; } .burger div { width: 35px; height: 5px; background: black; margin-bottom: 4px; }
Adam (7 months ago)
Im sorry about my comment earlier on, I love your channel. thank you for helping me so much. youve changed your life around
Atul kumar singh (7 months ago)
is compatible with bootstrap?
jason trinh (7 months ago)
amazing as always
Fitri Kurnia Mulyani (8 months ago)
very helpful, awesome
B W (8 months ago)
Great tutorial Brad, thank you!
Mark Quadros (8 months ago)
Can I add this to divi?
Aaron Swartz (8 months ago)
My side menu would not move over after writing all the HTML and CSS using Sublime 3. Do you know what the problem would be?
Dr. Dan Bigs (4 months ago)
The text editor does not matter. Make sure your spellings are correct in your js file when you getElementsById.
Gabriel Samaniego (8 months ago)
Noob question. If .btn-close’s position was set to absolute (top: 0, right: 22px), what’s the need for margin-left: 50px? And shouldn’t the ‘X’ be at the top edge?
DalenySivilay (8 months ago)
Amazing tutorial! Thank you for all of your help. Keep up the great work
kuku swuro (8 months ago)
Can someone help me, how to make the h1 ( "responsive side menu" ) stay behind the side menu, when the side menu is opened?
kuku swuro (8 months ago)
Hey Brad love your Videos as always..👍👍
F-ZERO (8 months ago)
Your are doing things : Exactly Right... and I'm not talking about CODE. I've been in IT for about 20 years and there are SO Many people that don't know the Basics you are showing in your tutorials. I started learning Atom and ran across your Vids. With the way you think.... I would say your cut out for management and above (if your not already).
Samin Engkong (8 months ago)
Brad save my thesis, thank you so much man
Christian Sølje (8 months ago)
Thank you @Traversy Media you make understanding HTML and CSS easy to understand keep putting out content like this with this quality.
Elvira Claesson (8 months ago)
Why doesn't the hamburgerbar show up on my webpage??
Vladimir Ll. Aguilar (8 months ago)
Hi, Thanks a lot for your tutorials, I've been looking for a solution with hamburguer menu on bootstrap, it doesn´t close after do click on ony option of the menu, is a way to solve that? Thanks for taking your time to read my post and great tutorials
Oscar Garcia (2 months ago)
Just add the onclick="CloseSlideMenu()" next to the a href inside the brackets.
Dibya Prakash Sahu (9 months ago)
Sir, please tell me the step how can I use both HTML and CSS in the same Atom ide
Ian Comisari (9 months ago)
awesome stuff thanks brad
khgriffi (9 months ago)
Brad, you are the man got dammit! Thank you.
Miljan Ristanovic (9 months ago)
Wish you just the best! Thanx a lot!!
Daniel Ekpo (9 months ago)
Great job Brad!
Francis Ben Lleve (9 months ago)
19:20 why margin-left is added on .btn-close? removing it stays the same
Pavan Obhan (9 months ago)
Thank you soo much. You are awesome.
Jordan Marker (9 months ago)
How do I use the Closable menu for mobile I don't know if I can put all this in a media query thanks for any help
Gal Anonim (10 months ago)
Superb tutorial Brad, thank You very much.
Catherine Hannan (10 months ago)
hey thanks Brad. You are great especially as you explain a you go along!
Larry McCall (10 months ago)
Great presentation. Clear concise and to the point.
Aman Dang (10 months ago)
Great Video Brad. Just one question, is there a way to make this kind of navbar with just a single set of links rather than having to maintain them in two spots?
Tirso Lecointere (10 months ago)
Hey Brad! I am using this tutorial for a project and I have a question... how can I change .side-nav width using media queries? I want it to be 100% on mobiles. Is there a way?
Amy Letzkus (10 months ago)
First of all, thank you! I love all your videos and have already learned a lot! But I was wondering if there is a way that you can do this in Wordpress without having a plugin? I am just starting to learn to make my own templates for Wordpress and have already watched your Wordpress videos :)
Eric (10 months ago)
The Real mvp is Brad. Respect bruh
JonnyBeoulve (10 months ago)
Thanks for leaving in the issue at 10:40. It was good practice to pause the video and try to debug your code.
Richard Cheng (10 months ago)
Hello, can you help me code svg tag to as img src instead? I created an SVG file but it won't work. What code should I place on the .svg file?
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!
Martin H. Andersen (10 months ago)
I don't understand why you repeat the menu items. If this was responsive, then you should restyle the ul instead of duplicating it.
md sajol (11 months ago)
thnaks a lot brad!!!!!
Ashfaque Ahsan (11 months ago)
Can someone please explain why he didn't need to set a transition property but only the transition duration for the side menu?
A248h (11 months ago)
thank u very much
nick woodward (11 months ago)
don't suppose you know why the text in my menu is staggering in? (as in it's very briefly on two lines as the menu slides in, then it's on one)
nick woodward (11 months ago)
always slick. thanks.
Jared Schroeder (11 months ago)
Having some trouble with the SVG hamburger thing. When I write the same code as he wrote all three lines appear on top of each other instead of in three rows. Any solutions?

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.