2.3 Finishing Touches

So let's begin section number three, where we're gonna add some finishing touches, basically, to our already functional menu. And the first thing we'll do is add some arrows, yeah, right here at the first level items, and also at the second level submenu items. So for the drop down arrows, we're actually gonna use CSS, we're gonna create some CSS shapes. So, Let's go all the way down here. Where I'm gonna say, Drop down arrows. So the way we're gonna create the arrows is with an after pseudo element on the list items that have submenus. Now here's the problem, just by using CSS, we cannot determine what menu items have submenus. If we were using JavaScript, that would have been super easy, and we would have searched the entire menu. We saw what list item had submenus, and we would've added a special class to it. But since we're just using CSS, we're gonna to have to add this class manually. So let's see, we're gonna add it to all of the list items that basically have submenus. So class is gonna be equal to, I called this class has-submenu. So which one does? Well, this one does, and this one does, this one, This one, And also this one. Okay let's see what else. This one, eBooks, and Pricing doesn't have it. Okay so that's pretty much it. Now for the drop down arrows, we're gonna begin by targeting the after pseudo elements of the menu items that have the class of has-submenu. So we're gonna say menu, we're gonna target the direct ul descendants of the menu, and then direct li descendants of that ul. This basically means the first level items. So has-submenu, yeah we're only getting the list items with the class of has-submenu, and we'll target the after pseudo element. And also we're gonna be getting every, List item with the class of has-submenu, and we'll get the pseudo element, yeah? So we'll get every list item with these characteristics from the submenus. So for that we're gonna set the content to nothing, and then we're gonna position them absolutely, that's important. Because we want to place them on the right side of the elements, and on the middle, vertically align them with the text. So we'll set top to 50%, this is applicable to every list item which has a submenu. Then we'll do a transform, translate, translateY, -50%, we're using the same technique that we used on the logo. Where was it? There it is. So we're using the same technique to vertically align them. And then, and this is the tricky part, we'll set the width to 0 and height to 0, and then we'll do the first-level arrows. Now if we're gonna take a look in our page, you'll see that nothing's happening, basically, we haven't changed anything. And that's because this after pseudo element is not displayed anywhere, it's not styled in any way. So we're gonna target, These, so the list items from the main level, so how do we do that? How do we create a triangle that points to the bottom? Well, it's actually a pretty interesting technique, we're gonna use borders to do that. So what I'm gonna do is just type it out, show you the result, and then I'm going to explain it. So we're gonna start by setting border-left, To let's say 5 pixels, the size of the border determines the size of your arrow, so 5 pixels is quite enough. Solid and transparent, yeah this is very important. Border-right will be exactly the same, And then border-top, oops, is going to be, again, 5 pixels solid, But it will have a color. And I'm gonna use a black color, rgba(0, 0, 0, 0.25), or 25% opacity. All right, so let's see if we got this right, And there we go. Okay the only problem is these are positioned on the left, which is the default, instead of on the right. So let's quickly fix that, let's set right to 0, okay? And that moved those arrows to the right. Okay so we have the arrows, but how exactly did we achieve this? Well it's actually very simple. When you apply a border to an element, and you set the width and height to 0, what you're left with is four triangles. So one pointing down, one pointing to the left, one pointing to the right, and one pointing up. And that's caused by how the borders interact with one anothers in the corners. You basically get a 45 degree cut between those borders. So if we want a triangle that's pointing down, we're going to make the left and right borders transparent, we're basically hiding them. But we are setting the border widths, that's important, and then the border-top, which points down basically, we'll set it to 5 pixel solid and we give it a color. That's all there is to it, it's a really, really simple technique. Now let's see about the second level, Arrows, so for second level arrows, I'm actually gonna copy this bit. So we're targeting the list items [COUGH] with the class of has-submenu from all of the submenus. And then inside, we're gonna do something very similar to what we did here. So I'm gonna copy this, we want an arrow that points to the right. So the transparent borders need to be top and bottom. And then the one that has a color needs to be the one on the left. Okay. Let's do a refresh. And there it is, that's the triangle pointing to the right. Now let's also this is also positioned on the left so we need to move it on the right side. So if I set right to the 0 that's gonna push it all the way to the edge of my parent. But maybe I want to position it a little bit more to the left, let's say 1.5 RAMs. And that will position it exactly where I want, we have 1.5 RAMs padding. On the left, I'm leaving 1.5 RAMs of space here on the right. All right, now something else that we can do here is actually highlight the list item. When we hover on its submenu because currently, we hover on the list item, and it's all fine. But as soon as we leave with our mouse, that list item.or that anchor tag changes the style. And we want to preserve that style when we're hovering inside its list item. Well, that's actually super easy to do. So instead of saying, let's see where it is, I'll just find it. We're looking for the hover. Okay menu, list item, hover UL, now it should be around here actually. So navbar a hover, okay, so this is where I need. So instead of hovering the anchor tag like this. We can instead say list item hover and we get the direct descendant, a. So by doing that, we make sure that that list item stays hovered basically. Or it has the hovered style whenever I'm inside its submenus, and that's pretty cool. Now what about adding some transitions to all of this? Maybe I want to add a little bit of opacity to the whole thing. So instead of just displaying these submenus, all of a sudden, we can use a nice transition for opacity. So to do that, we're actually going to set to comment, display none. From here, instead, we're gonna set opacity to 0 and also, we're gonna transition right here, transition. If I can type correctly today. Transition, we're going to transition all 200 ms, or 200 milliseconds and we'll give it an easing. And then what else we need to go is on hover, instead of setting display block right here to show it, we're gonna set opacity to one. All right, so let's see how that works out. Okay, all ready we can see a problem. So, I'm gonna go with my mouse cursor all around and show you how it looks like. It looks fine, right? Everything works perfectly. We have a nice opacity transition. However, if I move my mouse cursor here, watch what happens, oops. Now why is that? Well, I'm basically hiding these elements, but they're still there, they're just transparent. They have 0 for opacity. So when I hover on them, I'm activating the submenu. Now, a very simple way to get over that Is to set visibility to hidden as well as opacity to 0. And here just set the visibility to visible. All right, so that should do the trick, let's see. So now, these will only show, yea, when I'm hovering on the parent list items. Okay, awesome. So what else can we do to these? Well, That's pretty much it really. I mean, you can style this however you want. You can add your own colors, you can add your own border styles, you can style these submenus however you want, add shadows and stuff like that. But for a very simple demo like this, I think this will do just fine. I really wanted you to understand the basics of building such a menu. And what it takes, what are the steps, what is the markup? How do you achieve multi-level dropdown menus with just CSS? One other thing we can do now is maybe make it responsive so it behaves a little bit differently on smaller screens. Let's do that. So currently, if we're gonna take a look, if we're gonna resize this, yeah, it doesn't look very good. When it reaches about this size, you can see that it starts overlapping the logo, or going behind the logo. So that's not necessarily good. So we're going to write some quick media queries to go around that. And we're going to say here responses, so we're going to say media oops screen and let's set a max width here of about, I don't know 900. Pixels, that should do the trick, let's actually take a look. So about here, if I do a quick measurement, yeah it's about 800 x 5900 and that's about right. So when the navbar, or when the screen has a maximum width of 900 pixels, then I want to target the nav bar, and I want to align the text in the center. So let's see how that looks like. Okay, let's also change the padding here a little bit because we still have that lateral padding. So I'm gonna change it to three REMS to bottom 0 on the sides, okay? That's a bit better and what else? The logo. The logo instead of displaying it. Absolutely, or instead of positioning it absolutely, we're gonna position it relative. So I'm gonna say position: relative. We're also going to set its display to inline-block, that's gonna help with alignment. We also have a transformation. If you remember, we transformed the logo. We set it to translate y- 50% to vertically align it with our menu, but that's no longer the case here because we're gonna position the menu below it. So transform none, and what else? Well, let's see how this looks so far. Okay, so the logo's not displaying in the center. Sorry about that. So it does work, I just didn't resize it properly. Okay, all good, we need to add something to the logo. I'm gonna set a margin-bottom. Let's say about 1.5 rems, just to push down that menu. So on the menu itself, currently the menu's floated to the right, but we don't want that on lower sizes, we want to position it in the middle. So we're gonna say float: none. And also, I believe the menu items will be centered, yeah. So we'll simply say, .menu list item ul. And we're gonna do a text-align left, basically aligning the text in the sub-menus to the left. And I just realized, we need to add a little bit of a transition to the anchor tags as well. So let's go right here, .navbar a. Okay, oops, let's add a transition, oops, [LAUGH] transition. That wasn't incorrect or anything but I wanna keep this very simple. The code editor just added vendor prefixes automatically. So a transition, I'm gonna set it for the color, let's say 200ms and ease. So that should give us a nice transition for that anchor tag. So, yeah, I think that's pretty much it. So here it is, here is the menu on a normal screen. On smaller screens, it's displayed below the logo, so the text doesn't interfere with the logo. On even smaller screens, if you wanna develop this for, for example, smartphones, a good idea will be simply to hide it completely. And instead, show maybe an off-canvas menu or something like that. But we're not gonna cover it here, that's a topic for another time. All right, that's pretty much it for this third section and for the live stream. Let's see if we have some questions, let's see. If pricing had a hover, so this one, would it go off the page? Most probably yes, it would go off the page. This is the problem really with the sub-menus like this because you have to be careful where you place them. You place them too close to the end of the page, it's gonna be cut off here. Or even worse, it's gonna create a scrollbar. Now there are workarounds for this, you can for example, use JavaScript and you can determine the position of that sub-menu. And if it goes off the page, you can position it on the other way, right? So it's gonna start from here and it's gonna be displayed like this. So instead of displaying it on or oriented to the right, you're gonna orient it to the left. But since we're not using JavaScript for this demo and we're just using a pure CSS approach, unfortunately, that is just not possible. So yeah, there are certain problems that you will have to deal with, but with careful planning for your website's navigation you should be just fine. So I hope that answers your question. Let's see, other questions. Well, there doesn't seem to be any other questions. I would like to thank everyone for watching this live stream, for joining us today. I hope this was an educational experience, I hope you've learned something. If you have any suggestions, please send them over to Tuts+. If you want to see live streams like this in the future, let us know. But until then, I am Adi Purdila thank you again for watching and I will see you next time, bye.