How to Create a POP OUT SIDE PANEL with HTML, CSS & JavaScript

hey how's it going guys my name is dom and welcome to today's video where we're going to be creating this pop-out side panel using html css and a tiny bit of javascript in order to make everything work as we can see i'm able to open and close this side panel right here and you guys can put whatever content you want inside the side panel all of the source code for this is going to be linked down below if you want to download and follow along so now let's get into how to actually create this right here going inside the text editor i've got something like this an empty index html document with a linked up css style sheet which is also going to be empty so once you guys have something like this we're going to be good to go the first step is going to be to include google material icon library which is going to give us access to that open or close you know button or icon okay so i'll leave a link to these two websites below but if you go to fonts.google.com forward slash icons you can do a search for double arrow in the search bar also make sure you have the fields option selected and as we can see we have the double arrow right and the double arrow left to choose from okay so these are our two icons which are going to be used now how do we actually make use of them well if you go to this website right here once again it's going to be linked down below you can just simply copy this link tag right here and once you paste this inside the head of your html you're going to be able to use these icons right here so going back in the text editor let's paste that link right up there and now we are basically good to go so moving on with the actual side panel we're going to be writing out the html first before moving on to the css and then finally some javascript to tie everything together okay so when it comes to the html we're going to begin by creating a new div with a class of wrapper okay so this div right here is going to be the primary wrapper for all of our main elements the first one is going to be the main content itself for the left side the next one is going to be the button to toggle open or close and the last one is going to be the actual side panel itself so we're going to be using css flexbox to achieve that layer so firstly let's make a new div inside here with a class of main and this right here is going to be your main content so we can just say something like this is the main content pretty straightforward the second element inside the wrapper is going to be the button to toggle open or close so for this we can make a new button with a class of side dash panel dash toggle now you're going to also want to ensure that you have a type of button on this button this will ensure that you don't accidentally submit forms in the case that this button is inside a form okay so dropping down here we're now going to be using google material icons to give us that open or close icon the thing is this button is actually going to contain both the icons for open and close and we're going to be toggling the visibility of those icons depending on the state of the actual side panel so going back inside the browser and heading to you know fonts.google.com back here as we can see we've now searched for the double arrow and we have left and right so to actually use these icons on your web page go to the side panel right up here and simply copy the span which contains the code for your icon so i'm going to firstly just choose the left side copy that go back in the text editor and just paste that in just like that okay next up we can just make this a little bit more slim on the same line and give this a class we're going to say sp icon and then open okay this right here is our open icon we can duplicate this line here make the class close and simply change the icon to be the right side instead okay now if i save this and go and go in the browser we can see we have something like this we have both the icons presented inside the buttons like i said we're going to be toggling these visibility based on the side panel but we can now move on to the last bit of html and that is going to be the actual side panel itself so we can make a new div with a class of side dash panel and do something like this we can just say this is the side panel content like i said guys you can put basically whatever you want inside here and it all should work out now if i save this and go back in the browser we get this right here so now let's move on to some css and make everything tied together and work so back inside here in the css file we can firstly target the body so for the body i'm going to simply set a margin of 0 and a font family of sans serif and then lastly a line height of 1.5 this right here is purely optional i just like it make sorry i just like to make it look a little bit better okay cool now for the important part we're going to be targeting the class of wrapper so like i said earlier this is going to be a display of flex so let's just say a display of flex right here and also a height of 100 v height to achieve 100 vertical height within the browser's viewport i can save this and go back in the browser and we have this right here as we can see the flexbox has allowed us to then have our main content button and side panel all laid out like that we've also got that full height on the button we're going to be fixing that shortly okay so back into the text editor let's now target the class of main so for the main content we're going to be setting a flex grow of one this is going to allow the main content to take up as much space as it wants to if i save this go back in the browser we can see now it's sort of been pushed over a little bit okay because of that because of that you know flex grow if i remove the flex grow right up here we can see it goes back over there so it is now trying to expand as much as it can you know the main content okay cool back inside here we can also apply a padding of 20 pixels once again optional up to you guys now dropping down here we can now target the side panel toggle so of course targeting that actual toggle button itself all right so firstly let's set a width of 40px and the same thing for the height okay we're going to also want to ensure we have a flex shrink of zero this will ensure that the content on the left side is not going to affect the width of the toggle button if i save this and go back in the browser we get a perfectly square button right up there okay back inside here we can set a display of grid and a place items of center this right here is going to give us a vertically and horizontally centered icon back in the browser let me get this right here obviously guys we can't see the effect of that you know centered icon because there are two icons there but later on we're going to see how that works cool back inside here we can also apply a color of white on that toggle and a background of your chosen color i'm gonna be using zero zero nine five seven eight that is the decode green color and also a border of none followed by a border radius here of five pixels uh 0 0 and then 5 pixels so this right here is going to give us those rounded corners on the edges towards the main content so back in the browser and we get this right here okay finishing up the button we're going to be applying a outline of none and a cursor of pointer save this back in the browser and we get this here cool moving on we can now just simply copy the class once again and apply a hover sudo class to that and we'll just say when the toggle button gets hovered over we can set the background to be a darker shade of the color we chose previously so i'll just say here zero zero seven nine zero just like that okay cool now dropping down here we can now hide that close icon by default so we'll just say here a class of sp icon close okay now for the close class or for the for the close icon we're going to set a display of none with an important flag the reason for the important flag is because the google material icon library is going to set that display property and it's going to basically just deactivate it okay so if i save this and go back in the browser we have this right here okay so we can see now of course the close icon is gone and we have a perfectly centered open icon okay cool back inside here now we can now target the side panel itself and make that look all nice so for this we can say a display of none by default right i'll just deactivate this right now so we can see we can see what's going on but back down here we can set a width of 200 px and a flex shrink of zero okay some padding of 20px once again up to you guys and a color of white and that background color from previously uh the decode green color just like that and lastly a box shadow and we'll just say 0 0 10 px rgba 0 0 0 and then 0.35 for a 35 opaque black i can save this go back in the browser and we have this right here we have nothing there is no box shadow let's go back and figure out why box shadow rgba that's better save this back in the browser and we have this right here so once again guys you can put whatever content you want inside here you can remove the padding if you don't like it it's up to you okay cool let's just set that display of none to of course make it by default not be displayed and there we have it so let's make this this toggle work all right so the way it's going to work is we're going to be using essentially a class on the wrapper and if that class exists then we're going to apply some different css styles to of course make that side panel appear this class is going to be called wrapper dash or let's just you know what let's just say side panel open just like that side panel open and now we can apply different css styles if you know this class is present so back inside the css the first target for this class is going to be this part here we'll say side panel open then target the side panel so when that class is on for the side panel we can just say a display of initial this is going to undo this display of none and go back to the default initial value i can save this go back in the browser and we get this right here because of course that class is present if i remove that class right up here just press backspace there press enter and it is now gone so the javascript is going to be toggling this class on or off all right cool back inside here we have two more rule sets to go the second one here is going to be side panel open and we'll target the sp icon open so for that open icon we're now going to simply copy the same code from the close and paste it inside here to hide the open icon when of course the side panel is open okay then of course i'm gonna copy this right here and change this to be the close icon right here for the close icon let's make this go back to the initial value and make that important also save this back in the browser and now we can see when the side panel is open if i do a refresh here when the side panel is open we've got this side here we have the close icon now visible and of course everything else is displaying perfectly fine so now let's use some javascript to of course toggle that class so back inside here let's head down to the end of the body and create a new script so now we can say document.queryselector we're going to be selecting here the side panel toggle button and we'll just say add event listener i'm going to listen for the click event and basically when when that button gets clicked on we can now just say document.queryselector we're going to be selecting that wrapper okay so the class of wrapper right here and we'll say dot class list dot toggle and apply here the class of side dash panel dash open just like that if i save this go back in the browser i click on the button it's going to toggle that class right there and of course apply our changes and we are almost done there is one problem with this right here and that is if your main content gets too big you're going to encounter essentially a improper height on this thing so going back inside here i'm going to add some more content i'll say lorem ipsum and just copy this a few more times go back in the browser and refresh once i've saved it let's try again okay oh that's of course that's the side panel let's just copy this right here and paste it inside the main content itself there we go and try again so now i can scroll down and we get this empty space here so in order to fix that there are a few options the simplest option is going to be to apply an overflow rule on the main content so back inside here let's target the main class and we'll just say overflow y auto so now it's going to display that scroll bar if there is some overflow back inside here we can now scroll down and you're going to get this right here so that is that's the easiest option given our solution right so that right there is how to create a pop-out slider panel using html css and a tiny bit of javascript hope you guys enjoyed today's video if you learned something drop a like and subscribe and i'll see you guys in the next video

Channel: dcode

Views: 19,839

Keywords: collapsed side panel with html and css, collapsible side panel with html css javascript, collapsible content with html css, how to toggle a div with javascript, how to toggle html visibility, how to create a side panel with html, side panel website tutorial, html css javascript side panel, side navigation bar html css javascript, web design side panel, web design popout menu, popout menu html css javascript

Id: FeAhHPaGyVA

Length: 15min 33sec (933 seconds)

Published: Wed Jan 05 2022