Hi there. In this video we're gonna look to make a responsive navigation. So at the top here on the right, on my desktop view, the navigation is three buttons. And it's stacked like this, but tablet. Okay? It drops down to be underneath.
And the big one is when it's a mobile, it turns into this burger menu. So we're gonna look to do that. Now what we're not gonna do is we're not gonna open up a JavaScript file and start kind of hang coding everything, okay? What we are gonna do is leverage a lot. Well, um, in particular one specific thing that's already been made, okay? There's lots of different people who have made cool little reusable bits of code that we get to use and just go and read and style.
'cause although it would be nice to do it all from scratch, and if I'm honest, have I ever gone through and made a native sandwich by myself? No, I haven't. Okay? I go off and stand on the shoulders of giants and find snippets that I get to use and I style the hell out of them, but I'm using the underlying kind of basis of their work. Now there's a bunch of different ones. What your, the language to use, say you don't like the one that I use here, you wanna start with something different and you're looking for like a jQuery nav sandwich, okay?
Or, yeah, that if you go search for that, they'll find lots. I've found this one that is, it's one that I use loads. It's really simple. It's really easy, it's really easy to style. I like it. Okay?
It's this one here. Let me pull this out. Okay. It's this one here called Slick Nav by Josh Cope. Okay? Thank goodness for Josh.
He's made us super easy, um, yeah, nail sandwich that we get to kind of use in style and it's pretty got pretty good documentation. So first of all, you can do one of two things is if you've downloaded the exercise files, okay? Um, I've got the bits you need in there, but if you're just kind of watching the video, you can download, um, the files that you need, okay? Stick 'em on your desktop or stick 'em somewhere and open these. Lemme have a look. There's there, okay, there's a zip file.
Open them up and here's bits of documentation and the stuff you need. This is probably the only bit that is a little hard for people that are brand new. If you know what you're doing, this is great, but if you don't, there's a lot of stuff in here. And actually all you really need is if you open up distribution here, you need this thing and this thing mainly, okay? Those two files plus a little bit of text from here. So let's go through and do that ourselves.
So if you're following along with my files, uh, open up the, uh, how to code exercise files. And what we're looking for is I want you to grab this, this, this, okay? These three files are gonna help make it work. Okay? So, um, let's hit copy. And remember we're gonna go to our desktop, open up Dan's portfolio.
Remember everything for our site, all files, images, these, this bit of code included needs to be inside this folder. Now I'm gonna push it in here into the kind of like the root of the folder here. If you're gonna be real nice about it, you should have a CSS folder and a JavaScript folder and put everything CSS into that and JavaScript into that. We're not going to, for this one, we're just gonna keep it super simple. Um, and just lump them all in the bottom here 'cause it's not gonna be a particularly big site. So, hey ho.
So that's part of it. We've got this slick nav and we've got this thing here, this bit of jQuery that, um, Josh has written. And this is the library that it kind of refers to. So you need all three of these to make it work. So let's go and grab the code. We need to make it work.
So, um, if you go to the website, slick nav.com, it's got it here. I've, um, saved it as well on um, in the exercise files. So let's check it out. Exercise files, desktop code. There's this one here called navigation code. If we open that up, There's there.
Okay, there's this bit, okay? And this bit. So we're gonna grab this bit first, copy it and we are going to put it into the Dreamweaver And we're gonna replace hello world. That was great. We loved it, it was helpful, but not a whole website. So we're gonna paste this in and just to be pretty.
We're gonna tap it across once. Okay? So that's inside there. We use these tabs to kind of show who's inside what. Okay? And let's save it.
It's not working yet. Don't get too carried away or too upset when it doesn't work. Let's, let's preview a browser. We'll just see what we've got here. So here's my site here. That's all it is.
Case some list items. And you can see if I change these as items. Now if I change this to portfolio portfolio, hit save, jump out here. You can see that's what we're doing. Okay? So that's gonna be our navigation.
So, uh, that's the first part is we've copied this bit of code in. Next bit of code to paste in Is this stuff here, okay? This bit of JavaScript here. We're gonna copy it and we're gonna put it And where does this go? This goes just before the closing of the body. Okay?
All JavaScript goes down the bottom here, okay? You know it's JavaScript. Well you dunno, it's JavaScript, but generally if there's a tag called script, they mean JavaScript. Okay? And it always goes down the bottom here and you just gonna kind of, I push it down the bottom so I don't delete it. Okay?
You stay down there. There's the closing my body. Take returns. Don't mean anything in code, but it just keeps them separate. Now what we'll find is nothing's actually working yet. Let's jump and have a look.
Okay? Nothing's working yet. So that's part of the um, things we've pasted that in. We've pasted this in. The next thing we need to do is we need to link those files, okay? We copy them into our hard drive, the CSS and the JavaScript we haven't linked to them.
So let's do that. First of all, let's link to the CSS that Josh made. So link, then tab, okay then if I start using, um, what was it called? Uh, slick nav. There it is there. css.
Okay, great. So that's one part. And next I need to link to those two JavaScript files and we're gonna do it here. Remember, JavaScript goes down the bottom, okay? And we're gonna go script and this case we're gonna go source and we're gonna go there it is there. Nice thank you Dreamweaver.
Uh, there's two of them. So I need to do that one first. Okay? And I'm gonna close that off. Then we need to put in the closing for it there. Okay?
So we've got our script source for that J query for slick nav js. And now we need to do the same thing for, I'm just gonna copy and paste that. Oh, paste it there, make sure my tabs line up. Okay? I'm gonna make these all line up as well, just 'cause there's no real reason, but it looks a whole lot better when everything's lining up. Makes it easy to, for a visual person like myself to see.
Okay, so let's delete this one and let's put in the other one, which was jQuery. There it is there. Okay, so those two. So those both need to be there. Let's hit save and now let's go have a look. Fingers crossed, boo, it doesn't work.
Okay? Uh, it looks exactly as it did before and I know why. Let's go back into Dreamweaver, okay? When you're putting in this JavaScript down the bottom, make sure that this one here, okay, the jQuery one point 11.3 min okay is at the top, okay? This thing here is the thing that Josh has created, okay? And it references this library above it.
If this thing appears first, okay? It can't read below itself, okay? It needs to be, this needs to be above and that balance underneath. Okay? So, uh, that should work. Now let's have a save.
Let's jump out and have a look. Hey, that is it working? It may not look like it, but that is the kind of bare bones here. So, uh, the slick nav, um, installation, this is if you get to here, you've won, okay? We're gonna go off and style it obviously to make it look like we want. If you want to start with something different, if you have a look at slick nav, there's lots of different ways of kind of getting it started.
We've started with this basic demo, see here. Um, but there is ways of using, we've just used the basic code and you can see here there's a nice bouncy one with all sorts of other dropdowns. So if you want to go a bit more hardcore into this, okay, start with this HTML and this JavaScript rather than the one that I've given you. So let's go through, um, and have a little look where is he there? Cool. So it does the dropdown menu and these things are seeing.
Now what we need to do next is we wanna see the navigation only when it's down at um, mobile view, okay? And this thing here, we wanna see a tablet and desktop just so I'll show you here. So this is that line styled, this guy here, okay? And we see him here at desktop, we see him here at tablet and we don't see him at navigation. What happens is we only see this nav sandwich, which is this guy, okay? We're gonna delete the word menu, but we only see that at mobile and we see this at tablet and desktop.
So let's go and do that with our CSS. Okay? So what we need to do is we need to play around with our media queries. So let's, um, have a look at, first of all, let's look at the slick nav. Now I've had a look at this for you and it's, it's pretty good instructions, but they're really for somebody who already knows what they're doing, they're good for me. But if you're really brand new and you're a graphic designer, um, it's gonna be a little tough.
But what I've worked out okay, is that I need this guy here, this thing called slick nav underscore menu. Um, and this thing here, we're gonna copy it, okay? Um, you can just type yours in, okay? Go into Dreamweaver and what we're gonna do is we're gonna go into our styles and we're gonna say add desktop. Okay? I would like this thing called slick dev menu, okay?
And I've just played around and I've worked out that slick nav menu is the name given to uh, this box here, okay? That little stripe line. Okay? So, um, the three that stack next to each other are just called Menu. So that's the name for these, they're called Menu. And this is called Slick Menu.
Great. So slick menu. What I'd like to do is put in curly braces, okay? And I'd like to do something called Display and I'd like to say weirdly block, I like to say none that always got me when I started. Block feels like the same as none. Like block it, don't be in here, okay?
But block means display it like a big block of, I don't know, wood. That's how I remember it. Anyway, so I wanna say when I'm at Desktop view, I would like the stripy menu here, uh, to display none. So I don't want you to appear at all, please, semicolon. Okay, save. Let's go look at our menu.
Okay, let's look at the right one. Let's go here. Great. So at desktop, he doesn't display. At the moment though, he doesn't display a tablet or it's uh, mobile. We're gonna ignore this guy for the moment, okay?
But it's kind of working, it's doing what we said do not display on desktop, okay? And what happens is this one here flows down and because nothing contradicts it into tablet or mobile, um, yeah, it stays none the whole time. So what we need to do is actually what we'll do, just to tidy this up, these H ones here, we used this kind of just to test earlier on. Remember we just used it to change the color of my heading just so that we understood what these media queries were and how they worked to the moment. We'll just have a really nice tidy one. There is desktop, okay?
And also just while I'm here, desktop slash global, okay? People will call this global, this top one and anything that overrides it okay? Will be in our case, tablet. Im mobile, but global is cons. If somebody says put it in global, they mean the top chunk. Okay?
It might not be desktop, you might be dealing with what's called mobile first. So you've got your mobile instead of desktop at the top. Okay? But that's, that's called global at the top there. Great. And I got a little lost, okay?
But what we need to do is here, okay, we're gonna copy this whole chunk. So desktop, don't display and tablet though I'd like to display block. Okay? And let's go and check it out. Actually, I don't wanna do that. Do I?
I want it to be off on tablet. 'cause my little menu, actually my mockup in Photoshop has it off there as well. And it's only a mobile where I get to here and I block it. Great. Let's it save. Let's have a look.
So desktop not there tablet, not there. Mobile. Hello. Okay. And it's that easy kind of. Okay, so we've just turned it off.
The nice thing about this bit of, um, menu that Slick Nav has built is that these are tied together. So when I changed, you can see on here, I don't have, um, it's just this one portfolio. Okay? So if I change this one and I go to contact me in here, you see that's connected to this one here. They're all the same but displayed twice. Okay?
And all we need to do is decide which display to show. So we've done it for the mobile one and that works, right? So it's well, the, the burger menu. So the burger menu for mobile, not for tablet, not for desktop. Let's deal with this one. So I want it to appear for desktop.
I'd like it to appear for tablet, but when it gets down to mobile, I want you to go away 'cause that's gonna be the menu. Okay? And this menu is called menu. Okay? So we're gonna go to my styles and what I'd like to do is when I get down to mobile view, I'd like to say Dear menu. Um, you might have noticed that we've been using full stops for these things, okay?
To describe them. And sometimes we don't. Sometimes we have hashes. Okay? We are just following the lead from the person who made the slick nav. Okay?
This is called uh, class and this is here is called an id. Okay? And classes have, uh, periods in front of them, well full stops and IDs have hashes. How do I know that's an id? A couple of things. Easiest way was in his instructions.
There it is. There it says hash menu. Okay. And I can see it there. Where did I see it? Okay, I can see it has the ID of menu.
Okay. And great. So this idea of menu, I'd like to, let's put in Achille Braces. Great. And I'd like you to do something called a display. And this one here is going to be block.
Nope, none. See I get confused. Okay, so I don't want the menu here on mobile. Let's kind of look, look at our preview. This one here. Okay, so desktop, tablet, mobile.
That little line turns off and he turns on. So at mobile, all the work happens. Okay? Slick n menu turns off. Well it turns on and menu turns off. Okay, lovely.
Making 'em all line up. Is it safe? Okay, so that's it to get it kind of real basics going. Now we're gonna go off and style it 'cause it's looking a little bit plain, Jane, we wanna make it look like our mobile design. So let's go and do that in the next video.