Responsive HTML & CSS Side Menu From Scratch

[Music] hey guys welcome to another front-end web development tutorial in this video we're going to be building a responsive side menu or a collapsible menu hamburger menu whatever you want to call it now you often see things like this in frameworks like Twitter bootstrap but if you're not using a framework you it's really a good thing to know how to do this type of thing on your own just using you know HTML CSS and a little bit of JavaScript so let's take a look at what we'll be building this is it right here we have a navbar it's very very simple but also very clean looking and we have our main links here and then we have this icon and if we click that we get this sidebar that opens up nice and smooth okay and you'll see the main content gets pushed over as well so the main purpose of this is so when we were looking at this on a small screen no matter how small we can still have our navigation and you'll see the main navigation has actually disappeared when we get to a certain point it'll you know disappear and reappear so that's what we'll be building hopefully you guys enjoy it it's not going to take too long so let's go ahead and get started if you're looking to host a website or a small application at an incredibly low price check out a host and get started for as low as 275 per month plans also include over $200 of extras click on the link in the description below for more info alright so I have my Adam text editor open and you can use whatever editor you want Adam Visual Studio code sublime text they're all really good choices it doesn't really matter and I'm also running a plug-in or a package called Adam live server which just opens our index.html file on my local host and you'll have to use that you can just open it in your file system alright now I have an index.html file and a style dot CSS file those are the only two files we're going to need for this project so let's go ahead and add some structure to our HTML now I'm using Emmet so and it is a plug-in that allows you to do really fast HTML ok so we can do an exclamation and then tab and it's going to give us an entire HTML head and body document so let's go ahead and change the title here we'll just say responsive side menu and then we're just going to link to our style sheet so it's going to go to style dot CSS we're not using any frameworks or anything like that so everything is from absolute scratch now as far as what we'll be doing we're going to first start with the HTML which isn't a lot at all and then we're going to add the tiny bit of JavaScript and then we're going to move to the CSS which is the the meat of this project that's where most of our time is going to be spent ok now I also have the finished project open on another tab here just so we can kind of look at this and I can let you know what work what we're working on all right so let me just open this project up in another windows so I can because I mean I don't remember every single style and all that but we're going to start off with just creating a nav tag here and we're going to give this a class of navbar ok and I'm just calling a navbar I tend to use I tend to use the class syntax from bootstrap I don't know why I guess because I use bootstrap so much that I just tend to to be comfortable with those class names so inside our nav here let's just take a look at the finished product so this whole thing is the navbar right and then we're going to work on this this icon here which is actually created through SVG or scalable vector graphics now you could use something like font awesome or another icon library but I didn't want to block this up with any extra library so this this icon is simple enough to draw with SVG so that's what we're going to do so let's wrap this in a span ok so I'm going to give this a span and give it a class of open - slide all right and then we need a link in here which is just going to go nowhere so we're going to put a number sign alright and then this is where we want to put our SVG element all right now I'm no pro at SVG but this is this is pretty simple I'm just going to paste it in here so basically we have an SVG tag which is available with HTML 5 and then we're setting a width of 30 and a height to 30 so we're looking at this right here 30 by 30 and then each one of these lines here we're drawing with this path this path element okay and it takes an attribute for a draw for which is a D attribute and then we're basically saying we want this to go over 30 pixels and then we want to we're going to give it a stroke color of white so each line is going to be white and then a width of 5 pixels so each line here will be a width of 5 pixels so if we go ahead and we save that and we look at our file we're not going to see anything because the lines are white and so is the background so for just for now I'm going to make these black just so we can see it make sure that it's actually working all right and now you see we can see the icon okay and like I said this is just SVG is just one choice I think it's I think it's nice and clean though all right now we're going to work on these links here which are the main nav bar links so let's go under the span ok still in the nav but under the span and then we're going to create a ul here and I'm going to give this a class of nav bar - nav again kind of adopting the bootstrap class names and then let's put some allies here with some links now these links aren't going to go anywhere because they're not it's not going to be a working navigation it's just one page so we'll copy that and let's do home we'll do about services and contact all right so there's our main navigation if we take a look it looks really ugly because we haven't added any CSS yet so now we want to work on is this here the actual slide menu that that is going to pop out so we want to go under the main nav here now and we're going to create a div and we're going to give this an ID of side when I say side menu and then also a class of side nav now the only reason I'm giving this an ID is because we need to grab on to it from within the JavaScript okay so that's all the IDS going to be used for the classes where we'll add all the styles so in here we're going to need a few lengths we're going to need all the as well as the close button so let's go ahead and start with the close button now this isn't going to go to a specific page so we're going to put a number sign I'm also going to give this a class of BTN - close all right and then as far as what goes in here we're going to do ampersand x and then semicolon that's going to give us that x mark all right then we just want to put our links in so let's say these aren't going to actually go anywhere but that'll be for home I'll just copy that so we'll do home about services and contact all right and then the last thing we need to do as far as HTML is this main area here so let's go under that div and we'll create a div with the ID of main and in here I'm just going to put an h1 and we'll just say responsive side menu and that's it for the HTML so if we save that it should look like this which again is horrible-looking but we haven't added any CSS yet now before we get to the CSS let's add our JavaScript which is going to be very very simple basically all we want to happen is when we click on this icon we want to run a function called open what I call it open slide menu and that's going to take care of taking the slide menu and setting the width to 250 so this width right here should be 250 and we're going to initially set it to 0 and the CSS later on and then we also want to take this main ID here and we want to add a margin left because we want to push it over 250 this is 250 wide so obviously we want this to push over 250 so we're going to add a click event to the to the a tag right here that wraps around the SVG so let's say on click and we'll set that to open slide menu which is a function and then we're also going to add an event to the close button here so let's say on click and we'll set that to close side menu okay so two functions will go down here and create our script tags and let's say let's say function opens slide menu okay and again we're just going to set the width of the slide menu the side menu so what we'll do is a document dot to get element by D okay remember we gave it an idea of side dash menu and then we just want to set the style we want to set the width property equal to 250 pixels all right and then I'm just going to copy this and then we're going to grab the main div and we're going to change we're going to stay margin margin left yeah margin left 250 pixels so that'll open it let's go ahead and save it now if I click this you'll see that the main gets moved over because it's adding the margin you don't see any difference here because the width is not going to change because it's not initially set to zero we're going to do that from the CSS all right so let's copy this the whole thing and we're going to change this to close side menu and then we want to set the width to zero when we close it and we also want to set the margin left of the main div to zero as well so we'll save that now if I click it you'll see it goes it gets pushed over if we click the X nothing happens because because why did close side menu isn't that working they grabbed the console here closed side menu is not defined oh I said slide menu so we just need to add an L right here all right so if we open it and then we click that you can see it goes back and then this width gets set to zero okay so that's actually it for the HTML and JavaScript very very simple I tried to make this so you did as little markup as possible so now we're going to open up the style.css and this is like I said this is where the meat of the project is and I'm going to be checking over to the right because I can't remember every single style so I'm going to be looking over here as well all right so let's start out with the body and I'm just going to change the font family we don't need to do this but I want to make it look a little better so we'll say Ariel and serif alright and then we're also going to set the background of the body and say background color and we're going to set that to a really light gray all right save that and you can see that that's changed so let's go ahead and add styles for the navbar itself so that's going to have a background or background color and that's going to be the the dark blue of the Facebook blue which is that right there three B five nine nine eight we're also going to set overflow:hidden and let's set the height of the navbar to sixty three pixels okay there we go now that it's blue we can change the icon back to white that's how I want it so I'm going to change triple zeros to triple F's alright and if you wanted to for some reason you could make these different colors if we wanted the bottom one to be black we could do that alright so let's go back to the CSS and then we're going to style the links in the nav bar all right so let's say we want links to float:left we want to display them as a block we want the color to be it's going to be very very light gray so f two three times and then we're going to do text-align:center okay and then we're going to do a padding top and bottom is going to be 14 pixels and right and left will be 16 pixels then we're going to add text decoration of none because we don't want any underlines and then we're going to set the font size to 17 pixels all right so let's save that now this is going to pertain to all the links the sidebar and the main links but we're going to target each one later on so for the UL by default you l's have a padding of I think it's 10 pixels so we want to remove that we're going to say navbar ul we actually we don't want to remove it what we want to do is set only some padding to the top of the UL and none to the rest so we'll add 8 pixels on the top oops I'm going to took padding so we'll say 8 pixels on the top and then 0 everywhere else all right and that's all we're going to do for the UL and then actually let's set list-style:none as well because we don't want to need bullet points all right now for the link hover let's say now bar a:hover and for that we're going to add a background color and that's going to be a light gray and then we're going to just set the color to black looks alright so now if we hover you'll see has the grey background and the text turns black alright so now let's start to add some styles to the Navitus side navigation which is this right here alright so let's say dot so I call it side nav and we're going to set the height of this to 100% want to take full height we're going to initially set the width to zero so if I save that you'll see that the width is now set to zero by default so if we open it goes like that close it goes back to zero all right and then we want this to stay in stay in its place so we're going to say position position is going to be fixed and then we're going to set the z-index because we want it to be on top always so step to Z n index to one we're also going to position it make sure it's in top zero position and the left arrow position all right and then let's add a background color and the background color is going to be a black color a little lighter than pitch black so triple ones and then I want the opacity I want it to be a little bit see-through so we're going to do 0.9 and by the way what we're talking about here is this this whole thing okay let's see what else we're going to add we're going to disable the horrors of the scrolling horizontally so we want to do overflow overflow X which is horizontal and we're going to set that to hidden and then we're going to set a padding top to let's say 60 pixels and then we want to add our transition alright because right now let me just save that so right now if I click this it just you know it just appears and then disappears okay what I wanted to do is smoothly open so we need to add a transition here so transition and we're going to set that to 0.5 seconds so half a second so now if we click it you'll see that it's smooth it opens nice and smooth you can change this if you want let's say one second it'll open a little slower but I'm going to keep it at a half a second alright so now let's style the individual links inside of the so let's say side nav a grabbing all the a tags and we're going to set the padding of these to ten pixels everywhere except for the left which will be 30 pixels okay so it's top top right bottom left and let's set the text decoration to none because we do not want underlines I don't think I've ever wanted an underline on my links I don't know why that's the default but let's set the font size to 22 pixels and we're going to set the color to of light gray and we're going to make sure that these are displayed block and let's add a transition transition of 0.3 seconds so let's see what that looks like there we go it's pretty good now when we hover over these I want them to change just a little bit so let's add dot side nav a:hover and we're just going to stuff the color let's see it's initially light gray let's just just set it to white when we hover so you can see there's a little bit of change now we want to do the close button I don't want it right here I want it to be pushed over here so it's a side nav and remember we gave the button a class of BTN close alright so for that we're going to set the position to absolute to its container and we'll set the top to zero we want it at the very top and then from the right we want it to go over 22 pixels okay so top zero will be around here and then it will go from the right over 22 pixels and let's make the font size a little bigger we'll make it 36 and then we're just going to add a margin left here of 50 pixels okay so now it's placed nice and neat good alright so next notice that when we open this this response this this main ID here this content just kind of you know up here is over and we want it to have a transition so we're going to go over here and save ideas main and then we're going to add a transition so let's say transition which will take the margin left and we'll set it to 0.5 or 0.5 seconds that should work and then let's set padding to 20 pixels and let's set overflow to hidden and let's set the width to 100% all right so now you'll see when we open and close it gets nicely pushed over instead of just appearing over to the right alright so that looks pretty good see let's take care of these blanks right here why are those pushed down so let me just go back up here so oh wait a minute what am I missing you know what it is guys it's the path this should actually be the navbar ul this should be margin not padding there we go so now it's it's pushed down eight pixels and it should be equal on on both sides vertically all right so that is pretty good I think that that's that's basically it now if we were to make this smaller right now you'll see the links are still there so what we need to do is just add a media query down at the bottom so we'll say at media and then this is going to take in a parameter which is going to be the max width and we're going to set that to 568 pixels 568 now what this does if you've never worked with media queries any styles we put inside here are only going to be in effect if it's a max width of 568 so once it gets above 568 and you can see it even has the sizes right here in Chrome once it gets above 568 this stuff will not kick in okay well it won't it won't do anything so what I want to do is grab just these links which is the class nav bar - nav and we want to set that to display:none all right so now if I go smaller and you'll see that they disappear when we get to a certain size and the sidebar still works perfectly all right now if you want to make this so it doesn't show when it's big because I'm there's really no other reason - other than just you know physical aspects because you have the same links right here but I mean if you wanted this to be different and always show you could do that as well but if you did want to hide that what we could do let's copy that let's create another media query that will be min with 568 and then remember we wrap that icon in a span called open slide and we're going to set that to display:none so now if I save that you'll see it goes away and then if we get to a certain point there it is okay we get to 560 or less it appears alright but I'm just going to comment that out just because I do want it to show initially alright so oh one more thing this right here if you don't want that to show what we could do is add on to the body let's do overflow will say overflow X and we're going to set that to hidden there we go so that gets rid of that scrollbar alright so that's it guys hopefully you enjoyed this I tried to make it as simple as possible but yea that's it thanks for watching please subscribe please leave a like a comment whatever you can do is great and I will see you next time

Channel: Traversy Media

Views: 361,453

Keywords: html, css, css menu, html menu, css3, html5, css side menu, css3 menu, collapsible menu, hamburger menu, html css, website menu, responsive menu, responsive navigation, responsive website, responsive css

Id: wpGNFGqNfdU

Length: 23min 57sec (1437 seconds)

Published: Wed Jun 21 2017