2.3 Drop-Down Menus with CSS Animations and JavaScript

In our last lesson, we saw how to apply a few subtle CSS animations to a boring old button to make it seem much more interactive. In this lesson, we'll see how to apply transitions to a dropdown menu and how to use JavaScript to change its state rather than just the hover state. So let's go ahead and create a new folder here, and we'll call it Dropdown Menu. Drag that into Sublime Text. We'll create a new index.html file, add some boilerplate to it like we've been doing. And now for our markup, we wanna make a dropdown element and have an anchor inside of it that says dropdown. And we're gonna put a nav element inside of that dropdown element. So whenever somebody hovers over this dropdown div, it'll effect everything inside of it, including, well, it'll effect this nav element inside of it. So we can say, a href inside of that, we'll just say sublink, and times 3. There we go. Now let's create our CSS file or our Stylus file in the css folder here. Let's go back here and link to that. So that CSS, style.css. It's all the same stuff we've been doing. [BLANK_AUDIO] Open up Terminal, cd to our Desktop, cd to our Dropdown Menu folder, cd to our css folder. And then we'll run Stylus use autoprefixer-stylus watch style.styl. 'Kay, and now just test that that's working. Just make the background red, save, and open this up in a browser. Okay, good. It's working. Okay, and now to make this a dropdown menu, let's go ahead and get rid of this obnoxious red background. Refresh. And we're gonna say this dropdown, this nav element inside of it that houses all of our sublinks, max-height of 0. And then we're gonna say whenever they hover over that dropdown, we want the nav element to have a max height of something big, like 999 pixels, okay? And when we refresh, nothing happens. We can still see our sublinks here. So what we need to do is come up here underneath max-height and say overflow hidden. Now it's gone. Now whenever we hover over, we've got our sublinks. Now let's style these links up so, so that they look pretty. Come down here and say all of our anchors we want to be display inline-block. We want them to have a background color. We'll say a light blue color. Come over here and refresh. We'll give them a color of white. And we'll get rid of that underline, so text-decoration none. Let's give them some padding, too, 1 em by 2 ems. And the font-family, we'll say, is sans-serif. Okay. So, now whenever we hover over it, these sublinks are still horizontal where we're using display inline-block. So let's say all the, all of the nav anchors, all these sublinks, are display block. So we'll save, refresh. All right, looks pretty good. So now, we're still getting that jerky motion where we hover over it and it automatically shows everything underneath. And when we hover off of it, it's gone. So let's add a transition to our nav element, because the max-height on our nav element is the thing that's being transitioned, is the thing that's being changed. So we'll say transition all, or we could say max-height right here, to be specific. But we'll just say all. Let's say 600 milliseconds ease. Refresh, hover over it. So I don't really like how whenever we hover over this these sublinks take up the full width of the screen. And whenever we're hovering over this part over here, it's still active. So what we can do to fix that is just go down here and under our dropdown div, we can say display inline-block. Save that, refresh. And now our dropdown menu actually drops down directly from the Dropdown button. And when we hover off of it over in this area there is, it's, it doesn't activate. So you might notice if you hover over this and then hover off of it, there's a slight delay before the menu collapses. In my personal opinion, this isn't necessarily a bad thing. Because sometimes people will hover over something and then hover off of it on accident just a little bit. And, you know, they still wanna see what they're, what they were looking at. And the reason it's doing that is because the max-height is going down to 999 pixels and then slowly coming up for that transition. Now if we had this like, at something smaller, like, say, 500 pixels, that delay would be a lot shorter. But we wanna make sure that no matter how many items are in it, it goes all the way down, it slides down properly. So we'll kick it back up to 999 pixels. If this is something that really bothers you, there's a Stack Overflow question called CSS transition height: zero; to height: auto; that goes into this in detail. And there are a lot of different solutions. A lot of them use JavaScript to try to check and see how big your nav element is, and then they set the max-height according to that. And there's a couple of them, though, that are particularly good. For instance, this one down here, where he's using translateY. This one seems to work really well. So if you're partic, it's, it's a little more complicated, but it works well. So if it's something that's really bothering you and you can't stand to have that delay, then come check out this Stack Overflow question and this Stack Overflow answer. For simplicity's sake, we're gonna keep this basic menu with the max-height technique. And now let's say that you wanted to click on it. You didn't want to expand it, but you wanted it to expand whenever somebody clicks on it, kinda like Bootstrap's menus. We need to do, we need to use JavaScript to do that. So let's come in here and add a script tag. And we'll say the source is Google CDN jQuery. So let's click on that link, click on jQuery here, and we can grab Google's version of jQuery. And then, actually, let's just copy over that, paste. And let's add http before this so it'll work without having to fire up a local server. And we'll add another script here, and we'll put it in the JavaScript folder, and we'll just call it main.js. So now let's make a JavaScript folder with main.js in it. And just to make sure that it's working, let's add the jQuery ready function here. And we'll say alert 1. [BLANK_AUDIO] And refresh our page, and we get the alert, so good. [BLANK_AUDIO] So now what we need to do is basically reset this max-height right here and go ahead and set it to 999 pixels. So we'll say dropdown nav css max-height 999 pixels. And then we wanna go ahead and hide that by default, so that it's not showing. Refresh, and now whenever we hover over it, it doesn't do anything. So let's add whenever we click on it, it'll show our menu down here. So we'll come down here and say, dropdown. And whenever it's clicked, we'll fire this function that says this, which is targeting this dropdown element, find the nav element inside of it and toggle it. So it'll just show or hide it. And let's refresh. And everything works. And if we disable this JavaScript and refresh, we still have our slide-down, slide-up menu. So it's up to you which one you'd like to use. If you would like to have it so that you can click on it, you just need to add a little bit of JavaScript in there. If you don't mind, and you like the slide-down effect, then just leave the JavaScript off. In this lesson, we learned how to create a dropdown menu that slides down with a CSS transition. Then we learned how to improve it a bit with jQuery to make it a clickable dropdown. In the next lesson, we'll learn a bit more about the keyframe animations and the animate.css keyframe library.