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.