Create a clean, modern navigation with HTML & CSS

Key Takeaways

hello my front 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 we're highlighting our active page with this sort of you know cutting into the background type of effect uh 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 you 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 uh 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 uh that are you know 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 cuz 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 to it uh starting here where you can see we don't have very much going on uh we'll start here with my HTML though I have a nav set up as you'd sort of expect for navigation uh I have a UL set up in there with my class on it of nav list just so I can select it and style it easily uh and then inside of there I have my different pages the one thing I have done is I have my Lis the active page has a class of active on it and I've also put an area current uh 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 move 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 uh 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 uh doing that instead of using an active class and I think it's usually a good idea just cuz 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 uh I did have to put the class on the LI itself I could have avoided that by using the has selector instead so I could have said Li 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 the browser supports pretty good on it but it's not perfect so I'm going to do it without it um 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 um 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 um 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 uh maybe you want a div that would be you know a div. layout or something like that something that might be um 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 um I could do a position fixed on the nav itself but I find that just makes life a little bit harder CU then you have to have padding on the body and then what happens you know if 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 REM and 1 FR so this gets 20 REM of space and then we get the 1R 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 uh nothing too complicated uh 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 uh colors set up on these uh but that you know good enough um 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 uh if ever you do have a longer page that has scrolling and you don't want this to happen cuz 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 cuz it just goes the whole way down so I would put a Max height here of 100 VH um 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 uh 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 cuz that's sort of the default everybody knows uh 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 um 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 flex box for this but then you have an extra line where you have to change the flex Direction so great works perfectly here now obviously they are stuck to the side of the page which isn't very good uh 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 uh 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 um and we still get the sticky behavior and everything else working next up 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 nav list Lis and this is where most of the heavy lifting is going to happen uh and just for now you know what we're actually going to do let's go on my nav list just to make everything a bit easier to see let's also just boost the font size up a little bit um 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 uh 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 but for demo I'm going to say background and let's just go with a pink uh 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 uh li. active and we can say that the background on that one is going to be red just yeah we're doing a demo pink and red are the the demo colors of choice right um so the active one is there so that'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 uh left here or you could do a margin inline start as well if you want to go with the logical property um and 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 uh 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 uh 100% it's going to make a weird really ugly oval uh 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 uh 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 uh my 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 um actually it's probably a bit too much if the depending on my font sizes and my gaps and stuff um there we go I think that looks a little nicer um 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 Inver inverted border radius things that we want here and I think that's why you're watching this video basically uh cuz this is the the easy bit is done right now we're not actually cutting out of 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 uh because I didn't like how that looked but for these border radiuses the fun begins uh and for them I'm going to be using pseudo elements to be able to do it and I think it's the The Logical approach uh 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 uh 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 cuz 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 the 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 uh because I have the active here we could technically get rid of that um but I don't mind having it people will complain about the extra specificity or whatever but it's completely fine uh I I just find it makes it a bit more readable and you know exactly what's happening by having the LI 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 uh 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 uh we want to assign a width and a size and all of that so uh we'll come in we're going to fancy this up in a minute but let's just say it's one R the height will be one R 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 be able to see them uh 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 uh but they're also going to need to be round so we're going to do a border radius um and get them to be circles because it is a square you could do a 50% on there but um 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 and 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 position in the right spot cuz 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 I'm going to create a border radius custom property border radius and I'm going to say one ram and so so that's going to come to here and just going to push command D to select the next one and 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 uh 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 Time -1 and you can see by doing that time 1 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 A2 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 uh let's just do we're do this fast 0 0 we're going to do a zero and let's just say five pixels here and we'll do uh we'll do a different color I going to do red 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 it so I'm just going to take this same number here actually and do a 5 pixels and a 5 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 or you know I'm sort of acting it's acting as like a way of like covering up extra stuff uh you can get away with making this bigger for sure you just wouldn't want to make it bigger than you have to cuz potentially it could cover some other stuff and that wouldn't really uh 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 uh 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 uh but you can see it's not positioned in the right spot uh because of the the places they are so let's just change this back to Red for a second uh 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 -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 it's probably a limit to how big we can make this uh 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 um 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 um so yeah I think it's looking pretty nice I'm just going to reduce my font size down here a little bit um back to sort of what we had and I think it's it's looking really nice I sort of like that style um and what this is looking like this grid template columns I might actually bring it down a little bit just cuz 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 a name is view transition and content is same origin that's all we really need to have uh with the one problem is if I do that I'm going to save all those files or 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 before we do that uh 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 uh 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 flag actually exists in the stable version of Chrome but I was playing around with it and I realized that it doesn't 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 uh I'll put a link to Chrome Canary in the description down below um 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 cuz 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 were just looking at where it just switches but then once we go through these next few steps instead of it jumping uh like it did we're going to get a little bit more um just so you know once you switch it to enabled you are going to have to uh it's going to ask you to like if I switch to disabled it's going to ask you to Rel launch 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 um some Modern web features that are coming let's get rid of uh this right here and there we go uh you'll notice as soon as you do that actually we get this look at that it's crossfading 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 genter 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 cross fade 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 uh 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 uh 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 out it is but that's what Progressive enhancements are all about about it will work for people eventually uh 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 cross fade and then by doing a view transition name on an individual element you're adding in this sort of new thing uh 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 um and the reason it's group is this is like a new pseudo element that we've got button with uh 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 cuz it looks good but because I want to show you the problem see that the text is getting all kind of funky uh the blog disappears and then it and the reason the blog's disappearing when I click here is cuz it's that one is actually like transitioning over the name is switching and crossfading 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 um and this does raise one of the limitations of U transitions uh when we want to name them every element has to have its own and that's why like this it is its own because even though the active is switching between the different pages the LI 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 nav list A's and I sort of want to do this but I can't uh just because of the limitations that we have with um how view 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 CU 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 uh view transition name so this is where you'd probably want to use JavaScript a real world project just to program add these in yourselves um but I can just come in and this is my nav link one right and then I would just come in I 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 uh that's what I actually did in the one where I looked at the single page view transitions um but we could just come through 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 uh there's this really crazy thing that goes on there where they they get kind of wonky um as this is happening uh 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 uh and now it works there is one problem though is when 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 um I'm just going to throw a position of relative on them and do a zed index of I any number should actually work just to make sure um 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 uh 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 uh effect going on if you want to change the timing function animation timing function you can come in punk you can come in with whatever you want ease out um and or in ease in whatever you put here is you know e in um that's the timing function that it is going to use as it's going between them so you can come in with the the one that you want you probably want an ease in out um for it to be honest or some very 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 the 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 view transitions for like a filtering animation type of thing and with that I would like to thank my nabers 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