How To Create Advanced CSS Dropdown Menus

basic drop down menus like this are boring and turn users away from your site so in this video i'm going to show you how to create an advanced drop down menu which is going to engage and bring in customers [Music] welcome back to web dev simplified my name's kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video i'm going to show you how to create these drop down menus that have this nice smooth animation contain additional information inside of it as well as things like forms if you want you can really put anything you want into these drop down menus unlike normal drop down menus that just contain links which are kind of boring and to get started i just have this header section that you can see over here on the left we just have a header and it has three links inside of it one of them is just a normal a tag it doesn't do anything when we click on it it's just a normal link and then these other ones are just buttons that are going to open up our drop down menus and then i have a basic style sheet which just contains the stylus for the header and the link just so i don't have to type out this boilerplate code for you now to get started with this video what i want to do is i want to create essentially a dummy drop down that we can use to do our animations and all of the code for actually rendering out the drop down and then from there we're going to start to put the content in the drop down so i can show you how that would work so in order to create these drop downs the easiest thing we can do is wrap this button inside of a div which we're just going to give the class of drop down so if i just make sure i spell this correctly we can put drop down here now we have that div and we're going to put our button inside of that div then inside of that div we're going to create essentially our drop down menu so this is going to be another div which we're going to give the class of drop down menu and this drop down menu is where our drop down content is going to live for now we're just going to put the text drop down content in there so we can see how our styles are going to work so we can just save that and move over to our styles.css so we essentially created a drop-down and this drop-down is going to be the thing that wraps everything and the main thing i want to set on this is a position of relative that way we can absolutely position our drop down menu inside of it like we have here so i want to take our drop down menu and for the drop down menu i just want to take the position and i want to set it to absolute because we want to absolutely position this inside of this drop down container which contains our link now for now we just go over to here and save our page we can kind of see we have this drop down content which is showing up below our information so far this is working mostly how we wanted to but i want to specifically position this in the exact location i want it to be so i want the left to always be zero so it lines itself up on the left that's not really going to change anything at the top here i want to be a hundred percent but i also want to add some padding essentially between this drop down content and the link up here because if we just do a hundred percent you can see it doesn't change position because it's butted right up to the link so instead we're going to use calc here we're going to take 100 and we're just going to add 0.25 rem on to that and it's just going to give us a little bit of spacing below the link if we make this larger for example we change it to 0.5 rem you can see we get even more spacing in our case 0.25 i think looks pretty good now the next thing i want to do is just get basic styling to kind of give it that white background and shadow so we can come in here we can say the background color this is going to be white and that way we get that white background color we can also come in and we can give it a little bit of padding we'll say 0.75 rem just to give a bunch of space around it and we're also going to say that the border radius is going to have a little bit of rounding we'll say 0.25 rem and finally the most important thing is going to be the box shadow we apply to this so we'll just come in here with a box shadow we'll say zero and two pixels so it's going to have a little bit more shadow on the bottom portion then we're going to have five pixels here and zero and then we're just going to say rgba to give us a transparent color zero zero zero is going to be black and we're gonna say ten percent opacity so now you can see we get this nice shadow and you can see it's a little bit heavier on the bottom that's because we set the y to two pixels right here now if we wanted a larger shadow we could change this value here and that's going to give us more shadow or less shadow we could also make it darker or lighter by changing this opacity here as you can see we get a darker shadow or we're going to get a lighter shadow with a lighter value now the next thing i want to work on is actually making this animate in because right now it's just static on our screen so by default you would normally think well we'll just set the display to none and then when we bring it in we're going to change the display to block or something like that but instead we actually want to animate this in as you can see we have this nice animation here and if you have a display none go to something like display block you can't animate that so instead we need to use opacity that is going to allow us to animate this so by default we're going to set our opacity here to zero so it's going to be completely invisible and if we save you can see now it is invisible if we come in here with a drop down menu and we give it a class like active for example then we could change the opacity here to 1 and that would make it visible now we're going to need to hook up some javascript to do that so before we do that let's just do a little bit of testing what we can do is we can select our link and this link that is inside of a dropdown so we'll say drop down we want to get the link inside of it and then we want to get the drop down menu that comes after that link and we only want to do this whenever the link is focused and if you're unfamiliar with all these different selectors that i'm using right here i highly recommend checking out my full css selector cheat sheet linked down in the description below but essentially all this is doing is saying get the thing with a drop down class we want to get the direct child that is a link whenever we focus on that link so whenever we click it we want to select the drop down menu that is a sibling with it once we do that i'm going to change the opacity of our drop down menu opacity here to one so now if we click this you can see it opens that menu up and when we click away it's going to close but it doesn't matter how many times i click this it always stays open that's just the limit of using focus here we're going to change this out for javascript in a little bit but i like having this here so that we can test how this is going to work before we implement the javascript you will notice though there is no animation it just appears immediately so what we want to do is set up a transition we can just say transition here and we can set a delay for example we want to have a transition that lasts 150 milliseconds we want to do it on the opacity property so we only want to animate opacity and we'll say ease in out now when i click on this you can see it animates itself in over 150 milliseconds and then disappears over 150 milliseconds you will notice that over here we kind of drop the thing in place as opposed to just having it appear statically so to do that we can just set up a simple translate so we can say transform and we want to do a translate in the y direction so we'll say translate y and we're going to set up here negative 10 pixels so by default it's going to be essentially higher than it should be and if we just make sure that we spell transform correctly and we come down and we make sure that our translate y is set to zero in the active position you'll notice that it starts out up high and then it's going to translate itself down but you'll notice that doesn't actually happen and that's because we're not animating this property so what we need to do is just set up something else in our transition for transform and we want this to be over 150 milliseconds with the same exact timing curve now you can see this drops in and slides up exactly as we want now one final thing that you'll notice if we change this opacity to like 0.5 for now by default is that this overlaps our link and we actually can't click our link through this which is a bit of a problem so to get around this issue we can set the pointer events to none essentially that means don't allow any interaction at all with the mouse and then down here we can change pointer events to auto when it's visible so when it's invisible our mouse doesn't interact with it it pretends it doesn't even exist and then when it's visible it just acts like normal so now i can actually click the link even though it's behind the drop down menu so let's just change this opacity back to zero so we get the actual animation we're looking for that just means that when this thing is not visible on the page it's not actually going to be interactable now one other thing i want to do is you'll notice that when we hover over these links they turn black but when i click on it and hover away it no longer is black i want to carry over that black coloring so what i'm going to do over here where we have link cover i'm just going to add in another style for our drop down and this is going to be for any link that is a direct child when it is focused i just want to apply this coloring and again we're going to take care of this inside of javascript to make it so it's not only on focus but now when i click this link you notice it doesn't quite work that's because i want this to be the direct child not a sibling so now when i click on this you'll notice that it keeps that black color which is exactly what we want so now i've done a bunch of talk about javascript so let's actually implement the javascript to get this to work as we expect let's create a script js and up here we're just going to make sure we linked to that script js and make sure that we defer this until later and if you're unfamiliar about this defer keyword i have a full video on it linked in the cards and description for you so now instead of here i just want to set up an event listener this is going to be a click event listener and it's going to just be on the body or on the document and that's because inside of here i'm just going to check to see what we're clicking on so i want to say hey is this a drop down button so is it a drop down button and that's going to be if the target here matches a css selector and instead of using actual css classes for our javascript i like to use data attributes instead if you're curious why that is i have a full blog article on it i'll link down in the description below but essentially anytime we have a drop down button i want to give it a data attribute which is going to be data drop down button and we want to make sure that we don't have those brackets around it because that's for the selector only and then we can just copy that to both of our drop down buttons that we have and then whenever we have an actual drop down i just want to use the data drop down attribute like this now we can actually use those selectors in our javascript by just saying data drop down button now what we want to do essentially here is hey are we clicking on this button if so we want to toggle our drop down but if we're also clicking outside of our button we want to close it but if we're clicking inside of our drop down we want to keep it open so the first check i want to do is say hey are we inside of a drop down if so just ignore this completely so if this thing is not a drop down button and it is inside of a drop down so if it has a parent we'll just say target dot closest this is going to give us the closest parent that matches a selector which in our case is data drop down so if this is inside of a drop down then what we want to do is we just want to ignore this so if this is not equal to null then we're just going to return this just says hey completely ignore this click 100 just return out and that's because if we're in a drop down we don't want to do anything at all otherwise what we want to do is we want to say hey if we are clicking a drop down button then what i want to do is i want to get the drop down we're clicking so let's create a variable called current drop down and this current drop down here is just going to be set to e.target dot closest and we want to just copy this from up here because we're just going to be getting the closest drop down that we're inside of so this is getting us the current drop down and then i want to take that current drop down class list and i want to toggle the active class so essentially this is going to hide or show this drop down depending on if it's open or not then the very last thing i want to do is just say document.query selector all i want to get rid of all the dropdowns that aren't already open so essentially i want to close all the other dropdowns that aren't this one so we'll just say data drop down dot active so this is getting all of the open drop downs what i want to do is loop through each of them so for each one of these drop downs i just want to close them so we'll say if the drop down is equal to the current drop down then return do nothing at all otherwise what we want to do is we want to take our drop down so make sure we return here otherwise we take our drop down we're getting the class list and we're going to remove that active class so this bit of code closes all the drop downs that are already open except for the one that we just opened if for example we opened a drop down so this code right here is going to be adding the active class so in our styles instead of using link focus we can change this to drop down dot active same thing down here drop down dot active get rid of the focus on the link and now when we click on this you'll notice it opens up i can click inside of it it doesn't delete it but if i click the button again and you can see it opens it closes it if i click outside it's going to close that so now what i want to do is go back into my index html here and i want to actually set up the real content inside of here this content we're going to give a class of information grid because it's going to be a grid of information as you can see right here and then what we want to do is we want to have essentially a bunch of divs we want to have divs that are going to contain each section so we have a free tutorial section courses blog and other so we can do is we can create a div and then we can create a drop down heading inside of that this is going to say free tutorials because this is the first section and then below that we can have our drop down links and these are just going to be a bunch of anchor tags we'll say an anchor tag here that has a class of link and the href is just going to be nothing and we'll get say all then we can say latest and we can say popular and that is going to be our three links for this free tutorials section let's just copy this down again paste it in here and we're going to have a section that is going to be for courses so we'll just put my three courses in here we'll say javascript we're going to have a css course and we're going to have my react course then we'll copy this down again because we still have a couple more sections to deal with so copy that down and copy it down one more time for the last section so this is going to be for our blog and the blog is just going to say all i can spell properly it's going to say latest and it's going to say popular and then finally we have another section for all the links that just don't really make sense so things like my twitter are going to be in here a link to my newsletter for example and then finally a link to our discord group and if you're curious all these different things i've listed out here are actually things that i do have and maintain they'll all be linked down in the description for you but if we save that and we come over to our actual application you can see we have all that information and we want to make sure all this is inside of our drop down menu so if we minimize this you'll see it's not actually all in there so i just have some divs in the in your correct locations now as you can see they're all in the right place so when i open this up we have everything inside of there but obviously it needs to be styled so let's style out that information grid this information grid is just a two by two grid as you can see here so we can say display is going to be grid our grid template columns is going to repeat two times and we're going to have max content so it's just going to be as wide as it possibly can be we're going to have a graph of 2em between each one of our things and let's just make this to rem so now if we save go over here you can see everything is spaced out pretty well the next thing we need to worry about is our drop down links so we'll say drop down links i'm going to change this to a display of flex and we want to change the flex direction to column and then finally we'll put a gap of 0.25 rem between them as you can see we now have that nice spacing between all of our different pieces of content now finally you notice there's some weird things going on with our html up here so i'm guessing i just have some divs in the wrong locations where they should be so let's just make sure all of our divs are properly closed off as they should be these all look to be correct let's just make sure we indent these and it looks like we're missing one div that's supposed to close off our drop down here indent those save and now it looks like the spacing is proper which is exactly what we want we just had some weird div stuff going on and now what we want to do is create a new drop down menu down here for this button so we're going to create a drop down that's going to wrap this and then we're going to put inside of here a drop down menu so we'll say drop down menu and inside this drop down menu i'm going to have a form which we're giving a class of login form and inside of here we don't really care about the action inside here what we want to do is we essentially want to have a label and this label is going to be for the email field it's just going to say email and then we're going to have an input of type email and it's going to have a name and an id of email let's copy this down because we're going to do the exact same thing for password we'll essentially replace all instances of email with password and we'll make this one a capital p and then finally we're going to have a button which is going to have the type here of submit let's make a submit button that says login now if we come over click on login you'll notice it doesn't actually open the dropdown and that's because we need to add that data drop down attribute onto our drop down that way the javascript knows what's going on and now when we click on it you can see it opens up i just want to add a little bit of style in here to make that a little better so inside we can just say that we have our login form and i want to get the inputs and all i want to do is add some margin on the bottom of 0.5 rem just to space them out and as you can see it looks a lot better you can see we can swap between these different things we can close them all we can toggle them and this is an advanced looking drop down which is way cooler than those basic drop downs now if you enjoyed this video you're going to love my css selector cheat sheet it's completely free i mentioned it earlier in the video and this is going to cover every selector you need to know in order to master css so i highly recommend you check that out linked down in the description below with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 220,097

Keywords: webdevsimplified, advanced css dropdown, css dropdown, js dropdown, dropdown menu tutorial, javascript dropdown, js dropdown menu, javascript dropdown menu, css dropdown menu, css dropdown tutorial, css dropdown animation, css dropdown menu animation, css tutorial, css, js, javascript, js tutorial, javascript tutorial, css project, beginner css project, beginner css

Id: S-VeYcOCFZw

Length: 16min 8sec (968 seconds)

Published: Sat Sep 18 2021