Drop Down Menus
Hi there, this video, we're going to create this dropdown menu. Super easy. Reuses a lot of our skills basically. It's just another overlay but I like to separate them out so that you can get a feel for what you can do with those techniques to get kind of like different visual effects within your mock up. Alright, let's jump in. Okay, so it's the same techniques we've been using. I like to put these in separate videos because I remember when I was learning, you're like drop down menu must be something special and something different. It's just overlays with just kind of slightly different animations and it's just good to see how they work. But if you can imagine how a drop down menus kind of work with an overlay, you can skip on. So I'm just going to quickly build a drop down menu components, so I'll see you in a sec. Alright, we're back. So whenever you're designing like the component, do it on the page, you want it to appear but when you're ready, remember like before grab all the bi...
ts, cut it, put it onto its own page. Okay, so I'm going to put it on to just gonna duplicate this page. Should start naming these things properly. This is gonna be my dropdown if you have the whole art board selected and you have pasted will end up in the right place. We don't need you. Cool. And that's nearly it. Right? So down here, I'm gonna say when this, I created this course is page and the drop down menus, just like you can't do Hover states, so you can't kind of like move the mouse around, you could click on them and physically do an auto animate to move to these things like we did earlier on, but there's no hover state now in case you're thinking, wonder if there's there's not okay at the moment. Okay, so what we're gonna do, switch to prototype mode when this one's clicked, it's going to go to overlay and it's going to go to our dropdown menu and it's going to slide left. No, it's just going to dissolve on could slide down, I'm going to go to dissolve and I'll use ease out. That's the real typical one to use, let's give it a preview. Make sure this guy is being previewed and there was a little hopefully drop down menu, go on. Probably doesn't need to fade dr menus don't typically have it. So it's good to none. Give it a preview. Drop down menu goodness. So I hope you can see the overview is really good for getting this kind of interactions and it's just kind of like using the exact same technique and to accomplish different tasks. So drop down menu, the pop up modal or the navigation, sliding in from the side on your mobile app. They all use overlay. We just do little tricks to kind of make them feel like they're doing different stuff, but they're not but don't worry, that's the last of the overlay tricks, I'm going to show you we're going to move on to something else. In the next video, I'll see you over there.