Build A Responsive Sidebar Menu in HTML, CSS, & Javascript - Beginner

what's going on guys Clint here welcome back to the channel code Commerce in this video we're going to be building this dashboard and good old playing HTML and CSS and just a few lines of JavaScript everything is fully responsive so if you want to see I built this from start finish notice the nice tool tips there so um yeah if you want to say about this and let's go ahead and get started so I'm just gonna shrink this down a bit and there we go I'm actually zoomed in quite a bit so I'm going to drop that back to about right there all right so let's go ahead and I'm already in vs code okay I'm already in the folder that I'm gonna be working in just a directory by the name of coding Dash sidebar so what we're going to go ahead do is create our index.html file and also a style.css so we're not going to have a script a script file we're just going to have that inside of our HTML so let's go ahead and say let me say touch index.html and then style.css and what that's going to do is just create our files here off to the left and we can go ahead and close that so inside our HTML file I'm going to use Emmett here to generate some boilerplate code there and let's go ahead and open up a live server a nice little extension that we can view our file off to the right here so as you can see document and then what we'll say is code Commerce we'll just say YouTube so you can see that is what we are looking at right now okay perfect so to get started let's go ahead and start off by entering in our our HTML okay so let's go ahead and do that right now we're going to put this inside of our body tag and essentially we're going to have three main three main containers here so we're going to have a sidebar container here this little blue bluish dark navy blue side and then inside our sidebar we're going to have this top div here then we're going to have a we're going to have this user div right here and then just an unordered list here with a bunch of list items and then over here we're going to have our our main okay so and everything is going to be fully responsive as well so inside our body we're going to create a div by the name of sidebar so just using a shortcut you can say period then just name a class just a nice little Time Saver there so inside of our sidebar we're going to have a div by the name of top and like I said we're going to have a div by the name of user and then we're going to have an unordered list just like so so inside of our top here our top class we're going to have another div we're going to say a logo and inside here what we're going to use we're using box icons so this what the this menu here and all these icons something called box icon so let's go ahead and let's go ahead and use that so we're going to type in box icons.com this is it right here open it up got a bunch of little free nice icons here so go ahead and click on the usage link there and we're not going to install this with a a package manager or anything like that we're just going to scroll down and just use it as a font it's super simple to to use so just copy this right here and then come back to your index.html file and literally just paste it in right there below the title and that's going to be all the all that we need to do okay so I'm just going to shrink that back down here and there you have it that's all we have to do to have access to all these cool uh all these cool logos here so inside here let's go ahead where were we here inside of our logo here let's go ahead and add an icon so I'm going to say I class and for our class this one's going to be BX bxl Dash code pin we're using the code pin uh code pin icon there so as you can see there it is you see it on the screen so that's how easy it is to use box icons there so I'm going to give this a span here as well and we're going to say code Commerce and this is what we're creating right here so this this whole part right here first so below that below that div below the logo div let's create our our menu so we're going to have I and this is going to be a class of BX and then BX menu just like that and let's go ahead and give this an ID of BTN because we're going to use this ID that's how we're going to whoops delete that there this is how we're going to use our JavaScript to toggle our side menu there okay so next we're done with this logo class next let's go into the user to the user div here and we're going to have an image so I'm going to go ahead and pull this over just the image that I'm going to be using I'm going to pull it over right in here just this user Dash image just me holding some lightsaber Chopsticks pretty cool all right so next let's go ahead and use this image so I'm going to say image then the source is just user Dash IMG feel free to use mine I guess if you want to of course you could just use a one of your own then I'm going to give this a class of user Dash IMG which will go back and style here in just a moment so that's all we need for our image there but just below our image let's create another div here it doesn't have to have a class but inside here we're going to have a P tag with a class name of bold I'm just going to say Clint B just like that and then we'll say p and we'll just say admin just like so all right so next let's go ahead and attach our style sheets so we'll say sorry we'll say link CSS here just a little nice little shortcut and then let's open this up off to the side there we go and I hope you guys can still see pretty well I might have to zoom out just a tad um I want to make sure you guys can see everything so what I want to what I want to do is let's go ahead and give I'm going to grab this user Dash IMG and I'm just going to shrink this down a bit um I'm going to shrink that down a bit it's just kind of hard to look at so I will say uh width of 50 pixels we'll do something like that there we go and I'm going to go ahead and say border radius 100 and then I'll give it a border one pixel solid and then just this little light gray color okay so that's all we need to do there so let's go back to our HTML file here we'll go back to our HTML file and so inside of our unordered list okay inside our unordered list what we're going to have here is a list item and inside of our list item we're going to have a couple things here so we're going to have an anchor tag and I'm just going to put a number sign there it's not actually going to go anywhere and inside of our anchor tag we're going to have an icon so I'm going to give this a class and this class is going to be BX bxs Dash grid Dash Alt and so there it is right there feel free to look through all of your icons they have some pretty cool icons there so just below that we need another span here and I'm going to give this span a class of nav Dash item I'm going to call it dashboard just like that now below our um outside of our anchor tag but still within our list item I'm going to create another span with a class of tool tip and I'm going to say dashboard as well perfect so as you can see this is going to be our little that little tool tip is going to be the hover a little hover tool tip you see there okay so what I'm going to do is that's our list item there so next what I'm going to do is just I'm going to copy this down a handful of times and let's see here looks good there may have done too many of them so after a dashboard next we're going to do we'll see who products we'll change that feel free to skip through this part if you'd like I'm going to say categories categories then we're going to do orders let's see here orders and we're going to come back here and change change the uh the icons as well so customers customers that we're going to have after customers will have shipping shipping and then we're gonna have settings and then we'll have log out and log out cool and I believe yeah that's it that's it we don't need this one down here I copied down too many of them okay so that looks good there now let's go ahead and let's go ahead and change up some of these icons so for the log out here um we're gonna say BX Dash log dash out and we should see a new icon over here zoom in just a little bit there perfect now the next one for settings we're going to need BX Dash COG there we go now for shipping it's going to be BX was this shipping one dash location Dash Plus okay perfect and then for customers we're going to say BX Dash body okay perfect and then for orders the orders is going to be BX s Dash food Dash menu okay and then for categories we'll say BX Dash list Dash check and then for our products it's going to be bxs Dash shopping or this is the wrong one there for our products here there we go bxs shopping bag okay so I think that is all of our icons that's looking good so far all right so that's basically all of our HTML now I'm going to go ahead and add in some JavaScript here and again I'm adding it inside of my HTML file we're going to only going to have like four or five lines so it doesn't really make sense in this case to have an extra script file in my opinion so we'll just say script down here and this is going to go outside of our body tag element but within our HTML file okay so we need to have um a way to grab our buttons so I'm going to say let here we'll say let BTN equal to document dot query selector and we're grabbing the the BTN there and just to show you guys we are grabbing we gave it an ID of BTN here so this is what we're grabbing our little menu button there we already grabbed gave it the ID of BTN so that's how we can grab onto that so next we'll say let sidebar go to document dot query selector and here we're going to grab sidebar which again is our class of where we at here our class of sidebar this one right here so basically our our main component there our main container and we're going to add a function here so we'll say BT on BTN which is just this this element this ID that we're selecting we'll say on click and we're just going to run a function here and inside the function we'll say sidebar.classlist dot toggle and in here we're going to toggle an active class which we we don't have yet obviously because we haven't added in any styling but that's what we're gonna that's what we're gonna toggle so I wanted to go ahead and add that in there first that way it's going to make a little more sense and be a little more fun whenever we're doing our styling so let's go let's go ahead and uh we're done with all our HTML here we're done with all the icons we're done with our JavaScript that's literally right there like four lines that we're using so next let's go ahead and style this thing here so I hope this is you're still able to see this pretty well um I like to be able to to see what I'm doing I think that makes sense too so so next what we're going to do here we're going to come to the top and use the asterisk here and what that's going to allow us to do is basically just add some some Global styling so right now I'm going to set all the margin to zero and was set all the padding to zero and we'll say box sizing border box and then let's give this a font family um we'll use that to go or however you say that there perfect so that's looking pretty good so far it looks a lot better now we already have our image um Styles we have to see my big face and next let's go ahead and style we're going to grab our our sidebar here right our main basically our main uh our main div there and just so you know just to show you the sidebars everything you know this navy blue there okay so for our sidebar say sidebar we want to position this as a relative but absolute and we'll say top zero left zero height is going to be a hundred viewport height so it's the entire height of the screen and we'll say a width of 80 pixels and then a background color background color of we'll say one two one seven one e so it's kind of like it's like a Navy navy blue let's give some padding here 0.4 Rim top and bottom zero eight RAM on the left and right and then let's give it a transition for whenever we uh transition we'll say 0.5 seconds and then ease okay there we go perfect and if we want to what we can say we'll say with 250 pixels this is what we're going to be toggling here um you know what let's go ahead and we'll do this we'll let's go ahead and delete that we'll leave it as it is and let's go ahead and kind of set up all our all our toggling so we can see what's going on here so let's see here so next let's add in let's start using our active class that we just did with our JavaScript so what we can say is sidebar DOT active re use this little tilde there and we'll say main Dash content which I guess we didn't Let's see we do have our main content in here I guess we never really added our main content so let's go ahead and do that right now so inside the sorry back inside our HTML file um we're gonna we're gonna do this outside of the sidebar div here so literally just above this this body tag here the ending body tag we'll say create another div we'll give it a class of main content just like that and then we'll use a container here uh we'll say I'm just going to say code Commerce so there we have our H1 you can see there okay so I just wanted to make sure we we could have and this is what that's going to be obviously right there okay so all right so hopefully that makes more sense as we as we write some some CSS so what we're going to say in here left 250 pixels and then the width we're going to say calc one hundred percent minus 250 pixels there we go and you can't we can't really we haven't hooked anything up yet but as you can see we're starting to see some changes so let's go ahead and use this we want to change the width of our sidebar so what we'll say sidebar whenever it is active then we're just going to change the width to 250 pixels now there you go so as you can see it's getting some nice changes I I don't know if you can see what I'm clicking on you can barely see it because we haven't given the our button that white color yet let's go ahead and do that right now and give some space down here so for our button we'll say let's say sidebar and then we're going to grab our BTN just like that and then for our button we're going to position this as absolute so we'll say position sorry not relative but absolute and then let's give it a color of white that way we can actually see it there it is okay so we'll say top 0.4 REM and then we'll say left 50 percent and just if we toggle this down it makes more sense if we do it if we do it this way so we'll say left 50 percent um we'll say font size 1.2 Ram then let's say line height 50 pixels we'll transform translate on the x-axis so add that in that X there we'll say negative 50 percent and then cursor pointer there we go so yeah there you can see it right there everything's looking good so far now whenever our um our menus active we want our button to be over there so we'll say sidebar whenever is active grab the BTN and we can just say left um 90 or 95 90 looks good perfect so that's looking good so far so um all of our text is still that black color so let's go ahead and change some of that so we'll say we'll say sidebar top we'll say logo color of white I'm going to display Flex I'll say height 50 pixels a width of 100 align items will say Center pointer events I'm going to say none and then let's give this an opacity opacity of zero because we actually don't want it to show when we're like when our our net our sidebars closed however whenever it's open we do want it to show so let's go ahead and add an active class here so we'll say sidebar.active top logo opacity of one so now we can see it there so when it's closed the opacity is zero it's there you just can't see it and then we open it up you can now see it again okay and Let's do let's style our our icon here so we'll say top logo I'll say font size we'll say to ram we'll say margin right five pixels there we go perfect and again when we close it kind of disappears everything's looking looking pretty good so far smash like button you guys if you feel like you're getting this value out of it I'd appreciate it and leave me a comment down below let's say user let's grab the uh this Pita this little text right there with our name and our our role there which is admin so we'll say color we give it that white color and we're gonna do the same thing here opacity give an opacity of one we'll say margin left one REM there we go and we actually want this display is flexible add it in right here so we'll say user also display Flags light items Center origin one ram and then zero ah perfect that is looking good let's add our bold class we already added our you remember we added our bold class to the name there so we can go ahead and add that in we'll say bold and we'll just say font weight uh 600. ah perfect okay so next for our P tag so we don't actually if you close that down I don't know if you can see you still there it is you can still see our name there so we actually let's change that right now we want the opacity to be zero so we'll say opacity to zero and let's just copy this copy this down one but whenever the sidebar is active through our JavaScript we want the opacity to be to be one so if we open this up you can see it when we close it the opacity changes to zero and it disappears all right so next let's go ahead and let's take care of our list items down there looking kind of funky so we'll say sidebar unorder list list items and let's position these as relative the list uh there we go the list style type this style type is going to be none and there we go so let's say height of 50 pixels we'll say width of 90 percent and margin whoops margin is going to be 0.8 REM and then Auto okay and we'll say line height of 50 pixels perfect there we go that looks like a good good height and width now let's style the actual links here our anchor tags so we'll say sidebar on our list list item anchor tag we'll say color white and then display Flex align items to the center text decoration is going to be none border radius is going to be 0.8 rim and perfect looking good you can still see our tool tips there if you zoom in you can still see our tool tips that's okay we're going to take care of that in a minute and let's go ahead and add a hover class we'll say sidebar or a list list item our hover and we'll say background color and then our actual color is going to be that blue color there we go and there we go nice looking good looking good perfect that's what we want so far and so next what we want to do let's do our let's do our icons here we're going to add a little spacing in there so what we'll say is sidebar on our list list item anchor tag then our iclass which is our icons we'll say Min width sorry not none 50 50 pixels you want the what's going on there text align text line is going to be Center and then the height is going to be 50 pixels a border radius of 12 pixels it doesn't really make sense right now for you just close that down this is what we're doing here and then we'll say line height 50 pixels so everything is lined up evenly and so our our nav item which is basically our span here this white text that you see not the little black tool tip but the white text we don't want that to appear when our navbar or sidebar is closed only when it is active so let's go ahead and add a we'll say sidebar nav item and what we're going to do is just change the opacity to zero and then we'll do the same thing but just add an active class here so whenever our our sidebar is active which we're toggling with our JavaScript we'll just change the opacity to one so whenever we uh nice little hover effect there whenever we toggle that you can now see our our text perfect so everything's looking great so far next what we should probably do is style our our tool tips here so let's go ahead and let's go ahead and do that so we'll say sidebar Uli we're grabbing our tool tip and let's position these as absolute there you go and we'll say left 125 pixels I want to say top 50 percent transform we'll say Translate negative 50 percent and negative 50 percent then let's add a box shadow and we'll say I'm just going to copy this over here I don't want to type it all out box shadow um zero on the top 0.5 on the right 0.8 on the on the or sorry left and right here and then pointing at the bottom then just saying rgba basically all black with a little bit of a shadow there opacity there I mean so that's what it's looking like thus far looking pretty good now next we'll say let's give it a border radius so it's a little bit rounded edges there say 0.6 REM there we go and we'll say padding 0.4 rim on the top and bottom and then we'll say 1.2 RAM on the left and right there we go perfect now let's say let's give it a line height of 1.8 Ram let's kind of shrink it down a little bit there we go and we're going to give it a z index of 20. and this is what we want right here however of course we don't want them to show we can still see it when our nav bars open we actually don't even want them to show unless they're hovered so we're going to give this an opacity of zero and that's going to make them disappear and then we're going to we'll just add this side basically the same thing right here we can just copy that but we're going to add a hover selector on our list item and whenever we do so we can just change the opacity to one so now whenever we hover as you can see we have our nice tool tip looking good so far looking good looking good all right so next um a few other things here so if you hover over these things you can see our tool tip is still showing right when and we don't want the tool tip to show at all whenever our um whenever our our sidebar is active right when we're expanded out like that so let's just say we'll say sidebar active an ordered list a list item then our tool tip what we'll say is basically when our sidebar is active we're grabbing the tooltip class within our on our list and list item and we're just going to display display none so it's just disappears completely oh there you have it there you guys all right cool so um that's basically our sidebar now let's let's take a look at our our main content on the page here I'm just going to shrink this down a little bit um hope you guys are still able to see this I apologize if the screen's too small let me know in the comments and I don't want to do it this way again I'm used to working on one of the 49 inch wide screens so there's lots of real estate to see there um okay so let's go ahead and and change this here okay so and all we have to do is come down here we'll add it at the bottom so and this is on our HTML our our main content div which is outside of of the sidebar div there okay so what we'll say is main content and we want this to be position relative we'll give it a background color of that gray whoops forgot to close that off with a semicolon there and let's say Min height 100 viewport Heights and then we'll say top zero let's say left 80 pixels and we'll give it a transition of all 0.5 seconds ease and our width whoops our width is going to be we'll say calc and we'll say 100 percent minus 80 pixels and make sure you guys to have your spaces in here but if you did that and you didn't add the space between like the minus uh that won't work so make sure you have some spacing in there and we'll give it a padding of one rim there there we go there we have it perfect so let's just see I'm not going to open this up a bit here and I'm going to shrink this shrink this down we can close that for now so let's see here um we'll create or tell you what let's go into our HTML file you don't have to do this if you don't want to I'm just going to show you how everything's working so we have our container and let's create a h uh we'll create another H1 here just to just to see right side just to make sure everything is responding correctly so if we said um container we just display it as Flex justify space between not around between I want to make sure that goes to the opposite side and whenever we as you can see whenever we we toggle it isn't getting pushed off the screen and that's all I just wanted to show you with this with this right side div because sometimes you know you didn't want your your content on your page whenever you expand your navbar your content to fly off the right side of your screen so there you have it you guys we have our tool tips on Hover and we have our navbar full our sidebar fully expanded everything is looking great if and uh and in the future I'm going to create I'm almost done a react um basically a react dashboard using the similar similar sidebar and we're also creating a nexjs project as well so if you want to see that stay tuned subscribe to the channel I'll be releasing those here in the next week make sure you smash the like button you guys hope you got some value out of this thank you for watching leave me a comment and I will see you on the next video

Channel: Code Commerce

Views: 92,571

Keywords:

Id: uy1tgKOnPB0

Length: 30min 15sec (1815 seconds)

Published: Tue Jan 03 2023