FREELessons: 7Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Full-Screen Navigation Overlay

The sixth and final project for this course is a full-screen navigation overlay. This is a pattern that has started to “pop up” on many websites these days, and we’ll build one step by step.

With that done, you’ve completed these six animation projects! I hope you enjoyed them, and I look forward to seeing you in the next course.

Related Links

2.6 Full-Screen Navigation Overlay

Welcome to the sixth and final project of this course where you'll learn how to build a full screen navigation overlay. I'm sure you've seen this pattern around. It's one, you click on the menu icon, and an overlay shows up on your entire page with the actual menu. It's a pretty interesting concept. And I am looking forward to using it in my own projects. Now, the Sketch version of this looks something like this. So we have the same hamburger menu icon that we used in project number five, and we're gonna use that. This is the overlay, and this is the actual navigation. Very simple, I didn't want to over complicate things with fancy styling. You can do that yourself. What I do want to show you is how to get it done from an animation perspective. So let's jump back into CodePen where I've added the hamburger button. We also have the JavaScript code necessary to make this work, and currently, it changes, but it's active state is actually white. I changed that in advance because that's what we had in Sketch. Now, let's see how we can create the actual overlay, so let's go to the HTML here. We're gonna create a div with a class of overlay, and inside, what am I doing? [LAUGH] I was running CSS here. So overlay and inside a nav with a class of menu. And inside that an ul with let's see, 5 list items. And each list item has an anchor tag with the href going to well, nowhere actually. So let's expand that. And the first one, we'll say Home. Oops. And then Products, Blog, About, and Contact. All right, so that's our navigation, of course, from the perspective of the mark up. Let's move on to the CSS. Let's actually collapse some of these sections. We don't need all of them. Oops, I was toggling the single section over and over. What a? All right, so step number one, let's Style the overlay and navigation. So we'll start with overlay and to position it on the top and also making it stay there all the time, we're gonna set its position to fixed. We're gonna set a background to the color that we got from Sketch, so 7va9c3 which is that bluish color. And we'll set that top in order for it to cover the entire page. We'll set top: 0, left: 0, and then width: 100%. But here's the trick, we'll set its height to 0 because we want to animate the height. Also, we'll set the opacity to 0, right, then that hides it. But it doesn't actually hide it completely because when we move our mouse cursor over here over the navigation, we get that cursor. So it's still there, we just can't see it. Well, in order for it to not interfere with any of the elements on our page, we'll set its visibility to hidden. And by doing that, we make sure that it's completely gone now. One thing that we also have to do is center align all of its content or the navigation. So for that, we'll go the easy route. We'll set display to flex, align items to center, and justify content to center. And that will make sure its child elements are aligned vertically, both horizontally or excuse me, are aligned in the center both horizontally and vertically. Now, let's move on to the actual navigation. And actually, I didn't think this through. Let me actually comment some of these so I can see the navigation. Let's activate the background, oops. Okay, there we go. So the navigation, we'll set a font-size: 2rem, font-family: Roboto. I have it installed in my system, you might not have it. So the fall backs are Arial, Helvetica, and Family to sans-serif, and let's do a text-align: center, just like that. Now, the nav ul, let's remove that list styling, so list-style: none. Set a padding: 0, margin: 0, and this will just create a nice reset. And then we'll target nav ul li, so the list items. We'll set the opacity: 0 because we also want to animate those. And we'll set a margin: 1rem, top bottom 0 on the left and right, and that's gonna space them out a little bit. Let's set that to, let's comment that for now just so we can see what we're doing here. So a, we're gonna set the color to white. We're gonna remove that underline. So text-decoration: none. What else? Let's add the transition. So transition: opacity, that's gonna be .2 seconds, and just the random easing function. And we'll set the opacity: .75 or 75%. Because I want these to be a little bit more transparent in their default state, and have opacity at 100% on hover. So nav ul li a: hover, if I can type, just set the opacity: 1. That'll make sure that we have a nice transition for the opacity. So let's move these, Up, we're pretty much done here. Let's uncomment that opacity, and let's uncomment these. So the default state is now complete. Step number two, this is where the fun starts. Let's add the animation. So we're gonna create keyframes, I'm gonna call this fadeInLeft. So for fadeInLeft, it's pretty simple, add 0 or starting point. I want the items, so this is the animation for the actual items, the menu items. opacity: 0, and then transform: translate3d to get that smooth animation. We'll set these at (-25%, 0, 0). So by default, I want those menu items to be pushed outside of their normal position by 25%, of course, on the X axis. So now, I'm just gonna copy this and I'm gonna create the 100% point. Here opacity:1 and translate3d will get us to the original coordinates for each item. All right, now let's go ahead for step number three and style the visible overlay, and that means styling the class of overlay, overlay.visible. Now this class will be added via JavaScript when we click the hamburger menu icon. So apart from the menu icon receiving the class of active, our overlay will receive the class of visible, again using the toggle class method. So what or how does the .overlay.visible look like? Well, first of all, change its opacity from 0 to .85 because I do also want to show the content below it. What else do we change? Visibility, so visibility from hidden to visible. And also, we'll change the height to 100%. Okay, so let's see the animation in action. Okay, so it is visible but for some reason, we're not transitioning it properly. Hm, So let's see maybe we forgot to add something here to the overlay. Well, yeah, yes we did, we actually forgot to add the transition. So let's add it now, transition, yeah we'll transition the opacity over let's say .3s. We'll transition the visibility over the same amount and also the height, .3s, okay? So now, we get a nice transition for both the opacity, the height, and the visibility. Next, let's animate those menu items. So I'm gonna say overlay.visible, target each list item. And I'm just gonna set animation: fadeInLeft, the one that we created above. .3s ease, and that should do it for now. Let's take a look. Yeah, so there is a slight problem here because the animation executes like this, we can't actually see it. So we have to add forwards to the animation, and that will make sure it stays right there, but we also need a little bit of a delay. So after the overlay will be displayed, each of these will be faded in from the left. So for that, we're gonna say .overlay.visible li:nth-child. No not nth-child, or actually, we can use nth-child but I'm gonna say nth-of-type(1). I'm simply gonna add animation.delay, let's say something like, I don't know, 0.23s or .23 seconds. That should do it. And then, I'm gonna do the same for the rest of the items. Just incrementing this delay by 0.03 seconds, so this is gonna be .26, .29, .32 and .35. Let's do this, do a little bit of an indentation. And let's see what we have. Okay, so we're not quite there yet. That's because I forgot to change these values here. They were all referring to the very first item. Let's see that again. I forgot this bit. Sorry about that. All right, And there we go, we now have a nice animation for both the overlay and the actual navigation. So how did we achieve that? Well, two stages basically, the animation for the overlay was actually set using this invisible class. Yeah, we do have a transition here first. So we're basically transitioning the opacity, visibility and the height. We go from 0 opacity and height, and hidden visibility to 85% opacity, 100% height and visible now has the value for visibility. And as for the menu items, well, we created this fadeInLeft animation. We applied it to every single list item or every single menu item. And then we applied a slightly different animation delay for each of these five items. And the result is this. And that was it for the sixth and final small project, and actually for this course. I really hope you found it useful. I wanted to create just small but useful examples that you can quickly grab and apply them in your own projects. If you have any questions or comments please post them on the Tuts+ forums. Until then I'm Adi Purdila, thank you very much for watching this short course. And until next time take care.

Back to the top