 Hello, my friend and friends. Creating navigations like we can see this one right here can be a little bit tricky because CSS isn't very good at creating some of the things that are going on there, especially these like inverted border radiuses that we have. And it can be a little bit tricky to do that. So this video, I want to explore how we can make a navigation that looks a little bit like this. And we're highlighting our active page with this sort of, you know, cutting into the background type of effect like that. And as an extra little bonus at the end, we're going to look at how we can actually make this work on a multi page website. I get this nice little animation that's coming through like that as well. It's really not that hard to do, though it is a progressive enhancement because not very many browsers will be supporting this yet, but more and more will come. And even if they don't, it just means it will move and it just won't be animated. So it's a bonus feature for people that are more cutting edge than others. And so yeah, that's what we're going to be doing in this video. I hope you're ready to start because I definitely am. So let me get my head out of the way, let me get the finished version out of the way and we can dive right into it starting here where you can see we don't have very much going on. We'll start here with my HTML though, I have a nav setup as you'd sort of expect for navigation. I have a UL setup in there with my class on it of nav list just so I can suck it and style it easily. And then inside of there I have my different pages. The one thing I have done is I have my allies, the active page has a class of active on it. And I've also put an area current is equal to page on the page that is currently the active page as well. So if I come and look at my about page, it's move those things down onto the about and if I go to my blog, I've moved those things down over to here. So whether you're writing regular old HTML or you're doing this in more dynamic ways, which I'm suspecting you might be, you just want to have something that's going to be the active class as well as just for accessibility reasons, it's good to use your area current. I usually do like styling things through the area current instead, I've done a video about doing that instead of using an active class and I think it's usually a good idea, just because it sort of enforces accessibility. But in this case, because of the animation and some limitations on how we have to set things up for it to work properly, I did have to put the class on the ally itself. I could have avoided that by using the has selector instead. So I could have said ally has area current page, and that would work. But I want to make everything work on older browsers and just progressively enhance some of these newer features in and using the has selector would sort of if the browser supports pretty good on it, but it's not perfect. So I'm going to do it without it. But just so you know that technically we could have avoided that if you don't mind using the has selector. But now jumping over into our CSS, as I said, I don't have very much set up yet. I just have a couple of custom properties that are going to make our life a lot easier. And some very basic styling, as you can see along the way right here. And what I'm going to do is you might not always want to do this. But I'm going to just do it on my body itself, because I'm going to have my nav, and then I have a main. Maybe you want a div that would be, you know, a div dot layout or something like that, something that might be holding all of your content. But on the body itself, I am going to do a display of grid, just because I want to set up my navigation and my main content. I could do a position fixed on the nav itself. But I find that just makes life a little bit harder, because then you have to have padding on the body. And then what happens, you know, things are changing sizes, it's all kind of annoying. So this I find is a little bit easier. So on here, I'm going to do a grid template columns. And I'm just going to do a 20 ram and one fr. So this gets 20 ram of space. And then we get the one fr there. And I'm also going to come in with a gap of like two ram or something just to make sure they don't touch nothing too complicated. And then we can come on to the nav itself. And so on there, let's start with that. And I'm going to do a background color of my var nav BG, you probably have better colors set up on these. But that, you know, good enough, that should work. And because this is a grid item, I can also come on this and say that it has a height of 100%. Now it's not very tall, because I don't have very much content on my page. So just we'll come in here and say a min height of 100 VH. And then it's going to stretch that full size. Now just really fast here, obviously, I don't have any other content on the page. So I don't have any scrolling. If ever you do have a longer page that has scrolling, and you don't want this to happen, because the whole point usually of the vertical navigation is it's always there. So if that is the case, you could come in with a position of sticky here and a top of zero. The only problem is right now it's stretching. So it's still not actually going to stick to anything because it just goes the whole way down. So I would put a max height here of 100 VH. Or if you're worried about mobile and you don't want any overflow potentially happening, you could do this as an SVH instead. And now you can see that it actually sticks around SVH is small viewport height. I've done a video talking about it before. There'll be a card popping up or a link in the description if you want to learn more about the small viewport height. Now next up for the list itself, we're going to speed things up. I'm just going to paste in a little bit of code here just because that's sort of the default everybody knows. Though the other thing I'm going to do in here is I am going to do this as a display of grid with a gap of like two ram or something. And the reason I'm doing that is just to space them out because it's an easy way to add consistent spacing through something instead of having to select the children and add margin, but not the last child or anything like that. You could also use flexbox for this, but then you have an extra line where you have to change the flex direction. So grid works perfectly here. Now obviously they are stuck to the side of the page, which isn't very good. I'm actually going to put most of my spacing on the list items. And I'll talk more about that when we get to that point. But I will also come on this and add some padding block, which is your padding top and bottom using a logical property. And we'll just do two ram or something like that just so it's not stuck to the top of our page. And we still get the sticky behavior and everything else working. Next step, I'm just going to add this also very quickly with just changing my color to white and removing the text decoration so we can actually see them a little bit better. Now what I want to do is come into my nav list allies. And this is where most of the heavy lifting is going to happen. And just for now, you know what we're actually going to do? Let's go into my nav list just to make everything a bit easier to see. Let's also just boost the font size up a little bit so we can see things a little bit more clearly. And we'll also boost our gap up a little bit just to space things out a little bit extra just for demo purposes. And I'm going to add a background color here. This isn't normally where I would add it, but this will get removed for demo. I'm going to say background. Let's just go with a pink so we can see them. And the reason I want to do that is if we want that background color to come in like we saw in the finished version, we need this sort of to set the stage, but we're only going to have the color on it when it's active. And let's just for now, let's do our nav list li.active. And we can say that the background on that one is going to be red. Just, you know, we're doing a demo pink and red are the demo colors of choice, right? So the active one is there. So it's technically the only one we want to see, but we do want to come on this and I want to add a bit of padding. So we can say padding maybe one rem on the top and bottom, and then we can say two rem on the left and the right, just so we actually get a bit of spacing. Because I'm adding this padding here, I'm choosing to also add the margin left here, or you could do a margin inline start as well. If you want to go with the logical property. And whether you want to put this here, or you'd rather have that as, you know, extra padding on your nav list, that is up to you. Normally, I don't add these to the elements themselves. I usually do set things up over here. But for whatever reason, I just feel like I'm adding the padding, I'm setting the shape, I'm doing all of my stuff on the Li itself. So for me, I feel okay, putting the margin here in this case. Next up, we might as well round off the side here just to make it look a little bit better. So we can come in with a border radius. And if you do 100%, it's going to make a weird, really ugly oval. But the fun thing with using just large numbers that aren't percentages is we get a perfect pill shape. But of course, I only want the pill shape on the left side and not the right side. So we have we're starting here 100 VW, then we want a zero, then we want a zero, and then we want a 100 VW. And then we get it only showing up on that side. And now we can remove that pink color from here. And then we can come over here and add my var. It was my body BG that I called it. And we're sort of there already, right? I'm actually going to come here and increase this padding on that side as well. Just why not? Actually, it's probably a bit too much if depending on my font sizes and my gaps and stuff. There we go. I think that looks a little nicer. And now, you know, if we just want this, there you go, you're done. Right? That's all we really need to do for that. The more tricky bit is actually going to come from getting those inverted border radius things that we want here. And I think that's why you're watching this video, basically, because this is the easy bit is done right now, where we're not actually cutting out anything from our navigation. We're just faking it by matching the background color here. And actually, while we're here, I am going to come up and increase this gap a little bit just to move the about a bit further away. Because I didn't like how that looked. But for these border radiuses, the fun begins. And for them, I'm going to be using pseudo elements to be able to do it. And I think it's the logical approach. So we're going to have our nav list li. And of course, I'm doing nav list li descendant selectors. Maybe you don't like them. You could just put a class on these that would work perfectly fine. But I'm going to select my nav list li, nav list li before and my after here, because we're going to need both one for each one of those corners. And I'm going to first say that they have content, which is going to be nothing because they're just going to be decorational. But we need that for them to appear on the page. And actually, as I'm going through this, and I'm about to put them on, I don't want them to be everywhere. I only want them to be on the about here. So I do want to add the active. Because I have the active here, we could technically get rid of that. But I don't mind having it people complain about the extra specificity or whatever, but it's completely fine. I think I just find it makes it a bit more readable. And you know exactly what's happening by having the ally here in the CSS. If ever you need to make a change, you know where it's coming from. Now, these are going to have to be a position of absolute just so they can we can position them where we want them to be. So I'm going to come on the the element itself to add the position of relative, just so this becomes the containing block. And these will be positioned inside of there. And so let's come in position absolute. And then for now, we want to assign a width and a size and all of that. So we'll come in, we're going to fancy this up in a minute. But let's just say it's one ram, the height will be one ram. And then let's come in with a right of zero. And of course, we need a background on here. And for now, I will go with red, just so we can actually see them. Obviously, it's going to be important to be able to see them to get them where we want them to be. And then we're going to sort of muck around to actually get them to look the way we want them to. But they're also going to need to be round. So we're going to do a border radius, and get them to be circles, because it is a square, you could do a 50% on there. But that work, this works just as well. And we have that. Now let's go on to the before. And what we're going to do on the before is we're going to say that the top for now is going to be zero. And then we're going to come on and we can duplicate this line, we can say that's my after, and this one will be my bottom of zero. Just so you can see we have the two of them separated from one another. And now this raises the first thing that we sort of have to think about if we want to make this a little bit more adaptable, is how can we ensure that these are always going to be positioned in the right spot? Because the top zero bottom zero here doesn't work. They actually need to be like a negative version of their width or height. So for that, I'm going to come in here and I'm going to create a border radius custom property, border radius. And I'm going to say one ram. And so that's going to come to here and it's going to push command D to select the next one. We're going to do a var of border radius. And now like, you know, I just come here and it changes the size of it, which is going to affect the border radius that we have. And then that also can be used down here where on both of these that we can see these two zeros, we're going to do not a var, but a calc. And then we can do our var border radius. But we're going to do a times negative one. And you can see by doing that times negative one, what it's done is it's moved them to just outside, which is actually exactly where I want these to be. And this is kind of interesting how this is going to work. But again, if we come here and I make this a two, they're going to get bigger. And it's it's effectively the border radius is like the outside part of this circle right here. And now the real trick to what we're going to do here is to sort of fake that color that we want to hide this little part that's sticking out outside of there. So I'm going to come on the before, which is the one on the top. And I'm going to add a box shadow here. So my box shadow on this one is going to be let's just do we do this fast zero zero, we're going to do a zero and let's just say five pixels here. And we'll do we'll do a different colors and you read, but we'll do green. And you can see this green color has shown up around it, because I have zero offset in all directions, zero blur. And then this is the stroke of five pixels. So it's how far out until the blur is actually starting. Now, obviously, I don't want that green color being all the way around like this, I want to offset it and bring it in a little bit. So I'm just going to take this same number here, actually, and do a five pixels and a five pixels there. And it's going to move it on over this way. And it's covering up the area you want. Now the problem is it's covering up too much of the area. So I'm actually going to remove the border radius that I had from both of them. And we're going to bring the border radius down as an individual property on both of them. Because I don't want any of the corners to be circular, except for one very specific corner. And I can do this type of thing here. So I'm saying the top left, the top right, and the bottom left are all zero. And then it's giving that entire radius along the side right here. And then this green part that's sticking out, all it's effectively doing is covering the stuff that I don't want it to see are, you know, I'm sort of acting, it's acting as like a way of like covering up extra stuff. You can get away with making this bigger for sure. You just wouldn't want to make it bigger than you have to because potentially it could cover some other stuff. And that wouldn't really be the greatest thing in the world. So you do want to make sure that it's big enough. You could maybe base it on your border radius, but you wouldn't want you don't want it to get too big. So I think like 10 is probably more than enough to be honest. But of course, I don't want it to be green. So we're going to come in and say that this is var body BG and hit save. And it looks like it's perfect. And then of course here, the background color isn't going to be the red, it's going to be my var. And that would be my nav BG right there. And just like that, it works perfectly. And now I can actually take these two lines over here and bring them down onto the after as well. You can see it's not positioned in the right spot because of the places they are. So let's just change this back to red for a second. So we can see where it's going. And for this one, I'm just going to take the border radius, and we're going to put it here instead. So it's going to be showing up on the top side. Then here, we were going 10 across and then 10 down. I want to go 10 across, but 10 up. So on the second one here, we're going to do a negative 10, and it's going to move it upwards. And then of course, we can change the color back here to my body BG. And look at that, it looks pretty good. And it can, you know, hop around basically it follows where you want it to be. And all you have to do is come here and change the border radius and it updates the border radius. And if you wanted it to be zero, it can be zero. And if you want it to be, there's probably a limit to how big we can make this. There we go. So maybe you'd have to play around a little bit. But again, we want to be careful. I think overdoing it like this, you'd never really run into that. So I'm not too worried that it's that it's breaking a little bit at the size, but we could probably get pretty big before it starts falling apart. And I think that's really like pushing the limits on how big you'd actually want it to be. So yeah, I think it's looking pretty nice. I'm just going to reduce my font size down here a little bit back to sort of what we had. And I think it's looking really nice. I sort of like that style. And what this is looking like, this grid template columns, I might actually bring it down a little bit just because I thought it was sticking out a little bit too much. But there we go. I'm pretty happy with that. Maybe you're, you weren't here for this part, you were here on how can I actually animate it to go to where I want it to. And this is the part that's actually like, incredibly simple, where I'm going to go on over to my HTML and I'm going to come here and I'm going to add this meta tag. And this meta tag is a new meta tag that we have called name is view transition and content is same origin. That's all we really need to have with the one problem is if I do that, I'm going to save all those files. Of course, we need it in all of them. So I said save, but we might as well add it to all of them before we do that. And now if I come and take a look, it's still not working. And that's because this really is an experimental technology right now. Single page view transitions already work. I've played around with them. They were fully supported in Chrome. You can do some really cool stuff with them. But the multi page ones currently are very experimental and they're only supported behind a flag. So to be able to get this to work, there is the flag actually exists in the stable version of Chrome. But I was playing around with it. And I realized that it doesn't actually do things the same way. So for this for now, and it is an experimental technology. So we're going to do is open up Chrome canary and in Chrome canary, I'm going to make a new tab and I'm going to go over to my Chrome flags. And in there, I'm going to write view transitions. And so you'll find this view transitions API for navigations. And by it will be set to default. And you're going to want to switch this over to enabled. I'll put a link to Chrome canary in the description down below. But just know this will sort of work in regular Chrome, but it's going to look much better in Chrome canary. Chrome canary is going to be what eventually the whole spec will look like because this is exactly what we're doing is as I mentioned from the beginning, this is a bonus animation that's progressive enhancement. Most people are going to get what we are just looking at where it just switches. But then once we go through these next few steps, instead of it jumping, like it did, we're going to get a little bit more. Just so you know, once you switch it to enabled, you are going to have to it's going to ask you to like if I switched to disabled, it's going to ask you to relaunch the browser. So you'll just have to relaunch your browser to enable the features. And then we can keep on going with this and start exploring the modern web. Some modern web features that are coming. Let's get rid of this right here. And there we go. You'll notice as soon as you do that, actually, we get this look at that it's cross fading between instead of just jumping. So already it's already like an improvement as far as I'm concerned, it's much softer, it's much gentler. And basically what the browser does is it takes a screenshot of what it was, and it takes a shot of what it's going to be. And then it just does a crossfade between the two of them. But if we come down, and we go on to my active link that's right here, and I'm going to do a view transition name. And let's just call this active nav tab or something, whatever it doesn't matter, just give it its own name, and hit save on that. And look, it's working effectively. There's there's one little issue with it right now that we'll see. But it is sliding around. This is where in my experimentation so far in the stable version of Chrome, it won't slide, it's just going to continue crossfading, even though we've given this its own view transition name. But with how the view transitions are supposed to be working, this is the expected behavior, what we can see right now. So once this gets out from behind a flag, this is more what we'd expect. And eventually, you know, if something's working canary, eventually that will trickle down into the stable version. And eventually more and more browsers will support this, though who knows how long it is, but that's what progressive enhancements are all about. It will work for people eventually, for the most part. And yeah, basically, all you all you really need is the flag enabled and this year, and eventually in one day, we won't need the flag enabled and you get the crossfade. And then by doing a view transition name on an individual element, you're adding in this sort of new thing, right, this new behavior. But I am going to come here and I'm going to do a view transition group. And the group here is my active nap tab. And the reason it's group is this is like a new pseudo element that we've gotten with view transitions. And we have the start and the end. So you can actually choose like the before like, you can choose like the start of the animation or the end of the animation state or the group will be both of them. So I'm choosing both and it just is based on the name here. And the reason I'm doing that is then I can do an animation duration. And I'm going to say 1.5 seconds, I want it really slow, not because it looks good, but because I want to show you the problem. See that the text is getting all kind of funky, the blog disappears. And then it and the reason the blogs disappearing when I click here is because it's that one is actually like transitioning over the name is switching and cross fading over and it's all kind of awkward and weird the way that works. Maybe you like it. I think it's kind of awkward and weird. And this does raise one of the limitations of view transitions. When we want to name them, every element has to have its own. And that's why it like this is its own, because even though the active is switching between the different pages, the ally active here is one element. There's only one element on every page that meets this criteria. So it's perfectly fine. What I cannot do is say my nav list a and do a view transition name. And let's just call it nav link. If I do this, it actually breaks everything. And we go back to the default behavior, because I have a whole bunch of that list and I sort of want to do this. But I can't just because of the limitations that we have with how you transition names work. Every element that has a view transition name has to be a unique element that's only once on the original page and once on the new page that you're going to, which makes sense because you're trying to transition that element. This just confuses the browser and it breaks all of the view transitions. So what I actually need to do is give each one of the different links a different view transition name. So this is where you'd probably want to use JavaScript in a real world project just to programmically add these in yourselves. But I can just come in and this is my nav link one, right? And then I would just come in, you know, with JavaScript, you can just do it as an inline style on each one of them and just have it apply to as many as you need to. That's what I actually did in the one where I looked at the single page view transitions. But we could just come through it. I only have three working links, so it's fast enough for me now just to come through and do it this way. Because there's nothing else we need to do with these. We just need to separate and say that these are their own view transitions and each one of these is individual from the other ones. And while this should be the only thing that's required and I'm not quite sure why this happens, there's this really crazy thing that goes on there where they get kind of wonky as this is happening. And I'm not 100% sure on the cause, but I did find the fix, which is throwing a display of block on the links themselves. And now it works. There is one problem, though, is we move down, everything is okay. We move up, see how we cover it, and then it jumps forward. Luckily, that's also really easy to fix. All we have to do is on the links themselves, I'm just going to throw a position of relative on them and do a Z index of any number should actually work just to make sure that they're sort of pulled out and they're in the layer ahead of everything else. And now you can see that we've gotten around that as well. Once again, we can just then, you know, the speed is definitely too slow. But if you want to modify the speed, it's nice and easy to do. We get this nice, very smooth effect going on. If you want to change the timing function, animation timing function, you can come in, you can come in with whatever you want ease out and or ease in whatever you put here is, you know, ease in. That's the timing function that it is going to use as it's going between them. So you can come in with the one that you want, you probably want an ease in out for it to be honest, or some variation of that if you have a custom timing function you want, but it works. It works really well. It's really cool. And once again, if somebody's any browser that doesn't support it, like I have here where I haven't enabled it, everything works perfectly fine. You just don't get the fun little animation to go with it. And eventually everyone will have that even though it might be a little while away. But if you did enjoy this and you're excited by view transitions, just like I am, and you want something which is currently supported in this stable version of Chrome and which is also something it's progressive enhancement, meaning it won't break any functionality in the other browsers where it's not currently supported. You can check out this video right here where I looked at doing the in page of view transitions for like a filtering animation type of thing. And with that, I would like to thank my neighbors of awesome web on demand, Andrew, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.