Up next in 10
How To Create Advanced CSS Dropdown Menus
2K views
Feb 7, 2024
Elevate your web design skills with this comprehensive tutorial on "How to Create Advanced CSS Dropdown Menus." In this video, you'll delve into the intricacies of building sophisticated dropdown menus using advanced CSS techniques. The tutorial covers everything from structuring HTML elements to applying intricate CSS styles, transitions, and animations, offering a step-by-step guide suitable for developers seeking to enhance their frontend development expertise. Explore the nuances of multi-level dropdowns and responsive design, ensuring your menus are not only visually compelling but also user-friendly across various devices. Whether you're a CSS enthusiast looking to push your styling boundaries or a developer aiming to implement polished and dynamic navigation systems, this guide provides valuable insights. Join this tutorial to master the art of advanced CSS dropdown menus and bring a new level of sophistication to your web projects.
View Video Transcript
0:00
Basic drop-down menus like this are boring and turn users away from your site
0:04
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
0:14
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner
0:20
And in this video, I'm going to show you how to create these drop-down menus that have this nice smooth animation
0:24
contain additional information inside of it, as well as things like forms if you want. You can really put anything
0:30
you want into these drop-down menus, unlike normal drop-down menus that just contain links
0:34
which are kind of boring. And to get started, I just have this header section that you can see over here on the left
0:39
We just have a header, and it has three links inside of it. One of them is just a normal A-tag
0:43
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
0:50
And then I have a basic style sheet, which just contains the styles for the header and the link
0:54
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
0:59
dummy drop-down that we can use to do our animations and all of the code for actually rendering
1:04
out the drop-down. And then from there, we're going to start to put the content in the drop-down so I can
1:07
show you how that would work. So in order to create these drop-downs, the easiest thing we can do is wrap this button
1:12
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
1:19
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
1:26
So this is going to be another div, which we're going to give the class of drop-down menu
1:30
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
1:39
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
1:46
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
1:54
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
2:06
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
2:13
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
2:19
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
2:23
But at the top here, I want to be 100%, but I also want to add some padding, essentially, between this drop-down content and the link up here
2:30
Because if we just do 100%, you can see it doesn't change position because it's butted right up to the link
2:35
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 onto that
2:40
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.5RM
2:46
You can see we get even more spacing. In our case, 0.25, I think, looks pretty good
2:50
Now, the next thing I want to do is just get basic styling to kind of give it that way. background and shadow. So we can come in here, we can say the background color. This is going
2:58
to be white and that way we get that white background color. We can also come in and we can give
3:01
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
3:07
going to say that the border radius is going to have a little bit of rounding. We'll say 0.25
3:11
REM. And finally the most important thing is going to be the box shadow we apply to this
3:15
So we'll just come in here with a box shadow. We'll say 0 and 2 pixels. So it's going to have a little
3:19
bit more shadow on the bottom portion. Then we're going to have 5 pixels here and
3:23
and 0, and then we're just going to say RGBA to give us a transparent color
3:27
0-0-0 is going to be black, and we're going to say 10% opacity
3:31
So now you can see we get this nice shadow, and you can see it's a little bit heavier on the bottom. And it's because we set the Y to 2 pixels right here
3:37
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
3:42
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
3:49
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
3:53
So by default, you would normally think, well we just set the display to none and then when we bring it in we 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 animate that
4:08
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
4:14
So it's going to be completely invisible. And if we save, you can see now it is invisible
4:19
If we come in here with a drop-down menu, and we give it a class like active, for example
4:23
then we could change the opacity here to one, and that would make it visible. Now we're going to need to hook up some JavaScript to do that
4:28
So before we do that, let's just do a little bit of testing. What we can do is we can select our link
4:32
and this link that is inside of a drop-down. So we'll say drop-down, we want to get the link inside of it
4:38
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
4:45
And if you're unfamiliar with all of these different selectors that I'm using right here, I highly recommend checking out my full CSS selector cheat sheet link down in the description below
4:52
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
4:58
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
5:03
Once we do that, I'm going to change the opacity of our drop-down menu. Opacity here to one
5:10
So now, if we click this, you can see it opens that menu up, and when we click away, it's going to close
5:14
But it doesn't matter how many times I click this, it always stays open. That's just a limit of using focus here
5:19
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
5:24
before we implement the JavaScript. You will notice, though, there is no animation
5:27
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
5:34
For example, we want to have a transition that lasts 150 milliseconds, and we want to do it on the opacity property
5:39
So we only want to animate opacity, and we'll say ease in out
5:44
Now when I click on this, you can see it animates itself in over 150 milliseconds
5:47
and then disappears over 150 milliseconds. You will notice that over here, we kind of drop the thing in place
5:53
as opposed to just having it appear statically. So to do that, we can just set up a simple translate
5:58
So we can say transform, and we want to do a translate in the Y direction
6:03
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
6:10
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
6:18
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
6:23
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
6:30
And we want this to be over 150 milliseconds with the same exact timing curve
6:34
Now you can see this drops in and slides up exactly as we want
6:38
Now one final thing that you'll notice if we change this opacity like 0.5 for now by default
6:42
is that this overlaps our link and we actually can't click our link through this
6:46
which is a bit of a problem. So to get around this issue, we can set the pointer events to none
6:51
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
6:58
So when it's invisible, our mouse doesn't interact with it. It pretends it doesn't even exist
7:02
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
7:08
So let's just change this opacity back to zero so we get the actual animation we're looking for
7:12
That just means that when this thing is not visible on the page, it's not actually going to be interactable
7:16
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
7:23
I want to carry over that black coloring. So what I'm going to do over here where we have link cover
7:27
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
7:32
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
7:39
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
7:45
So now when I click on this, you'll notice that it keeps that black color, which is exactly what we want
7:50
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
7:55
Let's create a script.js. And up here we just going to make sure we linked to that script JS and make sure that we defer this until later And if you unfamiliar about this defer keyword I have a full video on it linked in the cards and description for you So now inside of here I just want to set up an event listener This is going to be a click event listener
8:10
and it's going to just be on the body or on the document. And that's because inside of here
8:14
I'm just going to check to see what we're clicking on. So I want to say, hey, is this a drop-down
8:18
button? So is it a drop-down button? And that's going to be if the target here matches a CSS
8:24
selector and instead of using actual CSS classes for our JavaScript I like to use data attributes
8:30
instead if you're curious why that is I have a full blog article on it I'll link down in the
8:34
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
8:42
those brackets around it because that's for the selector only and then we can just copy that to both
8:47
of our drop down buttons that we have and then whenever we have an actual drop down I just want to use
8:51
the data drop down attribute like this now we can actually use those selectors in our JavaScript by just saying data drop down button
9:00
Now what we want to do essentially here is, hey, are we clicking on this button? If so, we want to toggle our dropdown
9:05
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
9:11
So the first check I want to do is say, hey, are we inside of a drop down? If so, just ignore this completely
9:16
So if this thing is not a drop-down button and is inside of a drop-down, so if it has
9:21
As a parent, we'll just say target.closest, this is going to give us the closest parent
9:26
that matches a selector, which in our case is data drop down
9:30
So if this is inside of a drop down, then what we want to do is we just want to ignore this
9:34
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
9:42
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
9:50
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
9:55
And this current drop down here is just going to be set to e. .target. Closest
10:01
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
10:06
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
10:13
So essentially this is going to hide or show this drop down depending on if it's open or not
10:17
And the very last thing I want to do is just say document. Dot query, selector, all
10:21
I want to get rid of all the drop downs that aren't already open. So essentially I want to close all the other drop downs that aren't this one
10:28
So we'll just say data drop down. So this is getting all of the open drop downs
10:34
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
10:39
So we'll say, if the drop down is equal to the current drop down, then return, do nothing at all
10:46
Otherwise, what we want to do is we want to take our drop-down. So make sure we return here
10:50
Otherwise, we take our drop-down, and we're getting the class list, and we're going to remove that active class
10:56
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
11:03
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
11:10
Dot-active. Same thing down here. Drop-down. Dot-active. Get rid of the focus on the link
11:15
And now when we click on this, you'll notice it opens up. I can click inside of it, it doesn't delete it
11:20
But if I click the button again, as you can see, it opens it, it closes it. And if I click outside, it's going to close that
11:25
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 it here
11:29
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
11:35
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
11:41
So we have a free tutorial section, courses, blog, and other. So what we can do is we can create a div, and then we can create a drop-down heading inside of that
11:49
This is going to say free tutorials, because this is the first section. And then below that, we can have our drop-down links
11:56
And these are just going to be a bunch of anchor tags. We say an anchor tag here that has a class of link and the HRF is just going to be nothing And we 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
12:11
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
12:18
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
12:26
Then we'll copy this down again because we still have a couple more sections to deal with
12:29
So copy that down and copy it down one more time for the last section
12:33
So this is going to be for our blog. And the blog is just going to say all
12:38
If I can spell properly, it's going to say latest and it's going to say popular
12:43
And then finally we have an other 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
12:52
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
12:59
they'll all be linked down in the description for you. But if we save that and we come over to our actual application
13:03
you can see we have all that information. And we want to make sure all of this is inside of our drop-down menu
13:08
So if we minimize this, you'll see it's not actually all in there. So I just have some divs in the incorrect locations
13:14
Now, as you can see, they're all in the right place. So when I open this up, we have everything inside of there
13:18
But obviously, it needs to be styled. So let's style out that information grid
13:23
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
13:29
Our grid template columns is going to repeat two times, and we're going to have max content
13:34
so it's just going to be as wide as it possibly can be. And we're going to have a graph of 2EM between each one of our things
13:40
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
13:45
The next thing we need to worry about is our drop-down links. So we'll say drop-down links
13:50
We're going to change this to a display of flex, and we want to change the flex direction to column
13:55
And then finally, we'll put a gap of 0.25 REM between them
13:59
And as you can see, we now have that nice spacing between all of our different pieces of content
14:03
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
14:09
So let's just make sure all of our divs are properly closed off as they should be
14:13
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
14:20
Indent those, save. And now it looks like the spacing is proper, which is exactly what we want
14:23
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
14:29
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
14:35
So we'll say drop-down menu. And inside this drop-down menu, I'm going to have a form, which we're going to have a class of login form
14:43
And inside of here, we don't really care about the action. Inside of here, what we want to do is we essentially want to have a label
14:47
And this label is going to be for the email field. It's just going to say email
14:51
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
14:58
Let's copy this down, because we're going to do the exact same thing for password
15:02
We'll essentially replace all instances of email with password, and we'll make this one a capital P
15:09
And then finally, we're going to have a button, which is going to have the type here of submit
15:13
Let's make a submit button that says log in. Now, if we come over, click on log in
15:19
You'll notice it doesn't actually open the drop-down, and that's because we need to add that data drop-down attribute onto our drop-down
15:25
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 styling here to make that a little better
15:32
So inside, we can just say that we have our login form, and I want to get the inputs
15:36
and all I want to do is add some margin on the bottom of 0.5 r.m
15:41
Just to space them out, and as you can say, it looks a lot better. You can see we can swap between these different things
15:45
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-tops
15:51
Now, if you enjoyed this video, you're going to love my CSS selector cheat sheet
15:55
It's completely free. I mentioned it earlier in the video, and this is going to cover every selector you need to know
16:00
in order to master CSS. So I highly recommend you check that out, link down in the description below
16:05
With that said, thank you very much for watching and have a good day
#Flash-Based Entertainment