Lessons

Lesson Info

How to switch a menu nav from desktop to mobile phone

Hi there, this video, we are going to implement our really simple mobile nav that we built in the last video into our full site. Okay. Where it goes from this to desktop to mobile with a sweet little dropdown now we kept this one separate so that we could really kind of focus on implementing j query but now we're going to fold it into our largest site and like this side here, this is what we currently got, we've got buttons and what we do is adjust the spacing on tablet and mobile and I like this because it's going to really show us what ends up happening in the real world when you are trying to implement stuff. And it's never that simple where you've just got this clean clear, you've got to do battle with existing bits of code like our case. We've got this weird little dropdown thing here, we're gonna have to unpick that to try and make this work. It's more of a real world, practical example of the things that you might run into when you are trying to implement it. It's a really long ...

intro dan let's get started. Alright, so we're going to open up our existing site, I'm gonna open up index dot html. Double clicking it. Open up style dot CSS drag style over here and let's get started. So the first thing I want to do is we're going to turn let's turn knob off when it gets to the tablet screen. Okay. My mock up decided to go to this mobile menu even at tablet. Okay, so um it's gonna be on for both of these so let's go and turn what we currently have off. Okay and actually this is preview it what we got always a person the wrong page and so it gets down to here and it switches out. That's what we did previously. Right that it is definitely an easy way to do it. Okay, we're going to do it without javascript now so what I want to do is instead of flicking around I want to just turn all those buttons off and we're gonna turn our mobile version on so in bs code we are going to find our nav. Okay, so this knob here is going to turn off when it gets to tablet so I'm gonna go tablet view. I'm gonna double check, I don't have anything else trying to control knob this here. Okay, nope. So I'm just going to say just above here, I'm going to say never. And you get to tablet mode display None. Cool. Now you were like, hey, what about this one? Like we did all that styling in the last kind of few videos to make it do all that kind of weird display changes for mobile so this thing here is redundant there's lots of stuff that is redundant and I kind of half leaving this in the course because it's not as easy, it's never as easy as like just doing what I did in that first video and just kind of adding it in. There's always like oh this bit controls it all this bit's messing with it so this one's gonna be a little bit messy but for good reason so we can learn how to fix it. All right, so we're gonna ignore all that. Let's just make sure it actually turns off for ready. There you go. So when it gets down to tablet mode and down to mobile it turns off cool. So what we want to do now is have something else turn on our little stripy line so let's go back to the s code underneath Nav. What we'll do is we'll create another div tag and we'll call this one dot and let's call this one mob hyphen rapper, we're gonna put everything inside of this. Okay so inside my mob rapper we're going to add our icon of those little three stripey lines for our mobile Nav plus another set of these. Cool so let's grab let's cheat, let's grab our image. Okay, so open up the bakery nav and this is the chunk we want. Okay that's the icon that we brought in the image and svg we had a small text, we added a width and we gave it a class of burger menu so we're just gonna cheat because we're like already done that. Alright so we've got them in, he just happens to be that wrong. Here we go, let's just check, he actually appears clean it all up. All right there he is. Okay he's on the page but I want to turn him off because he's appearing all the time. I only want him to appear when we get down to mobile so what we do is we we've got three kind of parts remember Global, okay then we which is in our case desktop, then we get down to tablet view, then we've got mobile view and because we're turning them on fire we'll turn them on a tablet so let's find the bottom of here remember avoid the last curly brace, the whole media class is all wrapped up in opening curly brace and it closes all the way down here so I always have to at the end if you don't things will go wrong. Alright so we're going to say who we want. Dot mob rapper I would like you my friend and everything inside of you to turn actually we don't want to do anything for him yet. Okay I want to cut him out and I want him in desktop view to turn off Okay so just before the closing or opening of the tablet I'm gonna say mob rapper you are a display of none please. So he's off on desktop which is perfect but he never turns back on. Okay so now we need to say so he's off on desktop and then as it goes through it's gonna say alright on tablet though I'd like to turn him on down the bottom here before our curly brace, we're going to say display block and he's back on. Alright, so off on this top and then on on mobile or at least tablet in this case and because we don't say turn off again it just flows through to mobile so we don't have to say that again in mobile. All right, next thing is I want all the bits off the side that we're gonna turn off, remember all the buttons that are going to drop off okay that we want activated by this little click. So what we need is we could just go and steal all of this. Okay, so all these buttons here actually we'll grab, you know, grab these buttons. Okay. And so there's my image underneath my image before our wrapper closes. Okay, so there's my rapper ends there just after the image I'm going to put in. These guys these guys need to be in their own a div tag. Why? Because they're kind of just floating around a bit at the moment. They've got no kind of no grouping. Okay, this guy's by himself. These guys, these three, these guys need to be tied together so command shift p. Control shift P. Okay, start typing wrap and we're gonna use wrap with abbreviation and I'm going to wrap them up in something called something I'm going to make up right now called mob nav. Never come on dan, you can see the geese. Alright. Maznov and it has to have a period in front of it. Okay, so wrap with abbreviation dot mob nav. Alright, so these guys here, let's have a little look, they should be off on desktop because they're all wrapped up in this thing called mob rapper that were turning on and off. If you still see them, it means you've probably got these guys after this closing div Okay. It needs to be inside Nice. So often desktop tablet they both turn on the structure is all weird. We'll fix that for the last thing, what we want to do is just get this thing to click on and off first. Okay, so let's turn it off by default. This little mob nav. Okay, that's why it's good in a wrapper. Okay, because we can all off and one that will go so I'm gonna say on tablet view, mob nav mm dot mob NEv I would like you two just be off display display. None Alright, can't see them. I'd like to turn them on with javascript when this thing is clicked. Alright, so to implement our javascript and j query in this case we need to do two things. Remember we need to load the library Okay, which is the kind of all the rules around javascript Okay, or J query and then we need to actually put it around custom coding so just like we did before we're going to go to our exercise files. Your exercise files there is project three there's one in here called J query mobile neV Okay. Open that up and that's the Cdn. Okay. That is linking the library to tell our browser how this all works and remember where we put it. We can put it up here in the head. Okay. But it's more common to put it down here in the body. We talked about the reasons why before and one of the things that happens is like when I paste it, can you see my file turns green up here and a bunch of errors up here down the bottom here. It's because we're using a helper little extension to give us kind of error checking for html and it just doesn't recognize this. It's totally fine and legitimate. It's looking for a closing angle bracket after the script but we're kind of implementing it slightly differently and it works just fine. But so we're just going to have to ignore that. So the extensions are great. Built by other people. It's a bug in this particular one. Will this person who runs this um extension go and fix it mike. I'm not sure. Maybe it's something that can't be fixed. Okay because of he just needs to check for these different things. So I guess it's just a couple of things. One is you'll see it go green in here and it has three errors which you should go and check. Okay. And in our case, in my case this is working just fine. So we've loaded the library now we want to load the custom javascript. So we're going to create our own file, file new file. I'm gonna save it And I call this one scripts scripts dot Js Okay. And I'm going to paste in my text. Okay. This is what we typed out in the last one. We're not going to do it again. The things you will have to work out of is I don't like the slight toggle to toggle. You'll notice that the toggle by itself is not uppercase. Okay. It's camel case. So the first one is always lower and the middle ones are upper case. The other thing I want to do is make sure that these match up. So remember when the document is loaded, I would like you to look for a click on this thing. Okay. This class called burger menu which in our case is going to be that little stripy icon and when it does see that, click on the stripey icon. Toggle. The mobile nav. So you need to make sure this and this match up. So let's do let's add it first and then make sure they match up. So in index dot html we're going to load our script so we're gonna go to script source. Okay. You're gonna get a bunch more errors and we're going to say it is sitting in, it's just called scripts, scripts dot Js there it is. That's all we need to do. So it's loaded. Next thing I want to do is make sure that this okay burger menu matches up okay with the rapper that I've got. So I mean the class that I've got applied to my icon is my icon and I applied that class called burger menu. Perfect. So that matches that next one is called mobile Nav. Okay. So I want to turn this on and off. I haven't called it mob Nav. Okay, I've called it mobile Nav. So I've mixed up the names so just got to make sure that mob Nav is in here. It's just going to toggle that div tag on and off. All right. Let's see if it works. I have high hopes. Let's go where are we? Here we are toggle he Okay. So it turns it on and off the layers all broken. But it's okay. The mechanics work. And that's what's I guess their most important for now. Now the reason this is happening and if you're following along with me exactly in this course, you probably have the same problem. You might not. Okay. You might because like I want this guy up next to it and it and it kind of is in this implementation. Can you see these guys are stacked next to each other. But when they're down they kind of fall apart. So the only reason they're doing that is because I figured it out and I'll show you my process. So something's making that not stick it should because earlier on I said remember I said that header I said display flicks. Okay. And if there's two objects in it and in this case mob mob rapper. And where is it? A logo? They should by default sit next to each other. But earlier on when we were messing around, trying to do, remember this guy when we did a slightly different implementation where we just changed it based on the tablet. So in tablet we said here's my tablet and I just read through anything that could, that could be missing with it. Okay. So in my case anything inside ahead of container. So in tablet I'm going okay and hit a container or below. So cold. Nothing to do with it. Hi desktop only doesn't seem to have anything in here with the same name. Hit it could be okay. And this is where the problem is we said earlier on, we want the header, everything inside a header to display block. And that means they stack on top of each other. Let's we can actually get rid of this whole thing. We use that just to build that other style of menu and that's where the problems come in like it seems weird that I've kind of included in the class. I guess I know full well when I'm working on a site that there's so many things that relate to other things and you do one thing to fix the problem and it destroys something else. Okay, so if I have a class it always works perfectly. I feel like it untruthful. Okay, so here's our thing. Okay, now gets down to this, turn it off, turn it on. So they're displaying next to each other, which is cool. So this one that's kind of doing what I want right now I want to do is win this clicks, it's not kind of leaping out and we'll do a bit more style. But the basics are there, Who remembers what we did for this? We did it in an earlier menu. Our dropdown menu, remember it was kind of like just pushing each other around. So let's let's first of all stack these buttons and actually let's not use them my button. Well, because I want to change the styling of these and I want to leave them looking like that on the desktop. I don't want to be changing the my button. So let's call this one. Never been. Okay. Command D Control d on the pc. Stick them all. Let's have a look at them now. Okay, so they kind of just looking like plain old text. So let's stack them on top of each other because at the moment they are in line block. Okay, so we need to get them to stack on top of each other. So these guys on tablet view before the ending closing curly bracket. I'm going to say mobile never button I would like you to display block. Thank you very much. Hopefully there you go. Now they're on top of each other. The other weird thing is they're doing is they're when they are stacking they're pushing the mobile button we want to leave that as it was so what we want to do is we want to make the position absolute. So this guy here instead of like being relative to all his friends. So when when did he appears he goes, hey guys we're relatives, I'm relative to you so I'm gonna push you around so I fit. So what we say over here is you say mob never actually I want to be a positioning not a relative. Okay, absolute means I ignore everybody else. Okay all my friends, all my relatives and I only acknowledge my parent which in this case is who's the parent mob wrapper. Okay so it ignores all the rest of the things in our case is only one other thing this image so it ignores him and just kind of goes back to square one which is this wrapper. All right so look you see he ignores it but he acknowledges the rapper the parent around it but ignores all of his friends inside. Cool. So it's kind of working we need to push it around and over. Okay one of the other things is that Nav has jammed up on the side there, which is annoying. So let's find that guy. So mob wrapper includes the icon so we might as well push them all over. So mob rapper will say let's have a little bit of padding, A little bit of padding on the I've typed in Pa which is nothing close to it, but it got me really close to a petting right? It's a bit of padding on the right. I'm going to say pixels. Have a look. Let's push it over enough. Let's actually start previewing it. Right click inspect and let's look at it on. In my case I'm going to I a phone X. Remember if you can't see that. Click this little icon down the bottom here. Okay. And we're going to use this one. All right. What else do you want to do? So it's kind of a cross which is cool. Um maybe over a bit far. But let's let's start the buttons. So my next button. Let's do a few things to it. Let's give it a background color background color will do pick a color coral kind of works with what I'm doing. Let's have a look. Let's put some padding around it. And because this is mobile you want to make sure they're really easy to click. Ok so padding I'm going to top and bottom bit higher than what we did for the rest of them. Okay, so 15 pixels top and bottom and we'll do maybe 30 left and right. When I say maybe I practiced this, I did this run through before the glass and I was like yeah that's big enough now it's kind of working okay but I want to move it across so we're editing all our padding first. We know how far to move it across. So we'll add some negative margin so you can imagine left And we're gonna do margin right. Doeses't work just because we've set the set position to absolute we're gonna use negative left rather than some positive right? In this case I'm going to say no I'm negative maybe 60 pixels putting it across. It's kind of close, maybe go a little bit further this evening. It looks nice toggles nicely. And the text let's make it center. So text align. Let's make it center. Oh, alright send it in there. Nice. I want to push it maybe down from the sky a little bit so the whole rapper, I might add some padding to the top. So the whole wrapper in my case is called nev so mob never is going to have some padding top of 10 pixels. Probably too much. No, that looks all right. All right, it is working Okay. I paired works Now. Ipads previewing at 50% because that looks a bit weird buttons are maybe a bit big. Okay on ipad and same with this we can change the size of this obviously down here. Okay. To be something smaller and the buttons maybe don't need as much padding as I thought they did. Um one thing that is annoying me is that it's a black stripe the line. So you've got a couple of options, you can open them up and so we used it earlier on. Remember we had our exercise files, we had project three, we had this SVG burger menu. Okay. And it's a black stripe in line. I could just open this in say, illustrator would be the easy one or XD. Okay. And just change it to white and save it. That's one way I'll show you a kind of a weird thing would be our last thing before in this video is SVG Zara. Weird. Strange thing. They're not an image file as we know it. Okay. The code is actually web enabled and you can actually see how an SVG is constructed. Let's have a little look. It's got a file and let's go to open. Okay, And let's find in our images folder. Project three images folder. I'm in my local folder. Not in the exercise file. Okay. Here's the SVG that I'm working with. I like, like open. It opens and it's an actual script. Okay. There it is here. Let's close down these guys just so you can see they're knocking too confusing. It actually shows you all the kind of styles just wrapped up in this like it's yeah, it's a little bit different from a jpeg because you can start to see what, how it's built and it's built on top of kind of web syntax so you can actually understand it. Okay, so the one we want. So this is the path. Okay, if you are from the victor path world, these are actually the X Y coordinates of everything. Okay. It's got some this you can see these these are all come from where from these guys here it's added classes to it, which is weird right inside of a file and it is this is um font awesome. Remember those classes. Okay, font FAA bars. All right. And what we want is we're looking for the color. I can't see it there filled with current color. We're going to switch this out to just wait. Okay, hit save, have a look. Yeah, now it's white. You could use regular hashes. Okay, so what is F. F. F. F. F F. Okay. Or pick any sort of random color you want? Coral. Maybe it's time with the Nav. Here you go. Nice. Alright, so we've got our mobile nav working, we'll be turning the desktop off and then turning the mobile menu on and that's the easy part. Right. Just turning on and off and getting the javascript to work then there's a lot of hassle with trying to work out what styles can stack them, How do we push them across and that is the real kind of, I don't know, the fiddly parts of setting up a mobile nav and that's why testing is really important because what I'll do is I'll do that right at the beginning and then great, go start working with stuff and then start adjusting things like the head tags to do different stuff for different reasons and then later on like, you know, a day later I'm checking and I'm like the mobile nerves not working, you're like underneath, you gotta go back and figure out what happened and problem solved that way. If you find yourself in this and you're like man, I'm a terrible web designer, nope, you're just a regular web designer. There's a lot of chasing your tail, especially when you're new and you can kind of predict problems. I find my biggest problem is when I try and reuse stuff, I'm like oh I can, instead of creating like a separate class or a compound class, I'll just trying to lay your stuff together to try and be clever and ruin things. All right, That'll be it. I will see it in the next video