Building a Website #Day5.2

Key Takeaways

right we've got some visual progress finally we got something on the screen that is actually uh a thing to look at and actually um even this little header here has presented some interesting um side challenges um mostly around what to do with mobile let me show you what it does as the screen gets bigger and smaller there we go we are so a small sort of 3 20ish pixel wide which is what you'd find on an iPhone um it looks like that at the moment uh it has the little you know the little menu thing going on and then as the space kind of grows you get the actual sections and you can you know click around and all the rest of it and the little the thing is this little side nav here um when you click on it pop pops out like that but that's all done without JavaScript um and you can toggle it like that and so on uh so the way that I've done that is a little uh so I'm not the first person to to to do this in fact if you Google it there are plenty of people who do similar things what we've got here is uh a label and the label is connected to a checkbox and so when you click on the label it basically toggles the checkbox state to from checked and not checked and then um the menu is styled that you can see here if the checkbox is checked uh and you I'm using the general sibling selector tell them the nav to be display block and all the rest of it um and so you can basically by toggling the check boox you're actually toggling the visibility of the menu no JavaScript and now what I'm going to do is when I get to adding in the JavaScript to the site I'm going to progressively enhance that to something that slides in and out is my plan because while that works it's not the nicest for it to just appear I'd like it to slide in and out but this is actually it's working just fine the the thing that um you'll notice when you look at uh blogposts or or stack Overflow ansers that that mention doing something like this um is that they um they will set the the checkbox to display nonone and I didn't want to set the checkbox to display none because it so I can click on this if you look I can click on it um but I wanted to maintain uh keyboard control and I need to put in a focus State actually so when I when I see this video if I haven't done it already I want to add a focus State onto back onto that so that it's very clear that it has Focus because I think we want that but the reason um I didn't want to set um you can see the check boox there I the reason I didn't want to set the display nonone on the check boox itself is because you lose the ability to do keyboard shortcut uh the keyboard control so right now I I hit if I say if it's got focus by clicking on the label I give it focus and I can t I can still tap to it if I set this look if I set this to display nonone I can still click on it but I can't hit space bar anymore no amount of space bar is going to make that go away somebody who's got a desire to use the keyboard is going to get frustrated with that so I figure there's no harm to having it display but opacity zero it seems to give me uh the best combination of those two and because the the the label isn't um uh tabbable I'm hoping that that's the correct combination of things I need to check with Alice boxall or Rob Dodson uh to just help me make sure that I've definitely done that right but anyway that's the that's the side nav um and obviously disappears and so on so that's just a lot of CSS media break pointy type stuff um and there is this slight um curve on the head or the slight angle which is done with a an SVG and let me show you that since we're here looking at this header uh it looks like that and it basically like that sort of scales across based on that so it's because it's got preserve aspect ratio non um and it's just width 100% height 100% basically whatever div I give it to it's going to stretch to fill uh [Music] get your voice right Paul okay um it's going to stretch to fill up that uh element so that works out just fine actually um that's giving me the kind of look that I wanted to to have so there we are um a CSS only um side nav which is doing just fine we can click around we're in the location schedule and so on so making a little bit of progress there um and a couple of interesting little things along the way Grand don't forget to subscribe don't forget to keep dropping in the comments and uh ideas thoughts suggestions all the above uh and I will of course probably catch you in the next one [Music]