Creating a navigation hamburger menu

Hi there, in this video we're going to look to make a responsive navigation. So, at the top here, on the right, on my desktop view, the navigation is 3-buttons, and it's stacked like this, but tablet, it drops down to be underneath, and the big one, is when it's a mobile. It turns into this bigger menu. So, we're going to look to do that.

Now, what we're not going to do is, we're not going to open up a Javascript file, and start kind of hand coding everything. What we're going to do is leverage a lot, in particular, one specific thing that's already been made. There's lots of different people  who have made cool little reusable bits of code that we get to use, and just go and restyle, because, although it would be nice to do it all from scratch, if I'm honest, if I've ever gone through and made a nav-sandwich by myself? No I haven't. I go off, and stand on the shoulders of giants, and find snippets that I get to use when I style. They have a lot of them, but I'm using the underlined kind of basis of their work.

Now, there's a bunch of different ones. What's the language to use? Say, like the one that I use here. You want to start with something different. I'm looking for a jquery nav-sandwich. If you're going to search for that, you will find lots. I found this one, it's the one that I use loads. It's really simple, it's really easy, it's really easy to style. I like it. It's this one here, let me pull this up. It's this one here, called slicknav, by Josh Cope. Thank goodness for Josh! He's made a super easy nav-sandwich that we get to kind of use in ‘style’, and it's got pretty good documentations.

So, first of all, you can do one of two things. If you've downloaded the exercise files, and I've got the bits you need in there, but if you’re just kind of watching the video, you can download the files that you're going to need, stick them on to your desktop, or stick them somewhere, and open these. Have a look. It's there.  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. Actually, all you really need is, if you open up distribution here, you need this thing, and this thing, mainly. 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, and open up the 'How to code' exercise files, and what we're looking for, I want you to grab this, this, this. These three files are going to help make it work. Let's hit 'copy'. And remember, we're going to go to our desktop, open up 'dans-portfolio'. Remember, everything for our site, all files, images, these bit of codes included, needs to be inside this folder. Now I'm going to push it in here, into the folder here. If you're going to be real nice about it, you should have a css folder, and a Javascript folder, and put everything, ‘css’, into that, and ‘Javascipt’ into that. We're not going through for this one. We’re always going to keep it super simple, and just lump them all in the bottom here, because this is not going to be a particularly big site. So, as part of it, we've got this slicknav, and we've got this thing here, this bit of jquery that Josh has written, and this is the library 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.

If you go to the website slicknav.com, it's got it here. I've saved it as well in the exercise files. Let's check it out. Exercise files, desktop, code. There's this one here called the navigation code. If you open that up, it's there. There’s this bit, and this bit. We're going to grab this bit first, copy it. And we're going to put it into the Dreamweaver. And we're going to replace 'Hello World' - That was great, we loved it, it was helpful, but not a whole website. So, we're going to paste this in, and just to be pretty, we're going to tab it across, so that's inside there. I use these tabs to show who's inside what. 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 preview it in a browser, and we'll see what we got here. 

So here's my site here. That's all that it is. Some list items, and you can see, if I change these list items now, if I change this to portfolio, and 'save'. Jump out here, you can see that's what we're doing. So that's going to be our navigation. So, that's the first part. We’ve copied this bit of code in. Next bit of code to paste in, is this stuff here. This bit of Javascript here, we're going to copy it , and we're going to put-- and where is this code? This code is just before the closing of the body. 

All Javascript goes down the bottom here. You know it's Javascript, or you don't know it's Javascript, but generally if there's a tag called script, they mean Javascript, and it always goes down the bottom here, and you just got to kind of push it down the bottom side, don't delete it. You stay down there. 

I’m just closing my body text, ‘return’s don't mean anything in codes, but it just keeps them separate. Now, what we'll find is, nothing's actually working yet, let's jump and have a look. Nothing's working yet, so it's part of the things, we'll paste that in, we've pasted this in. The next thing we need to do is we need to link those files. We copy them into our hard drive, the css, and the Javascript, we haven't linked to them. Let's do that. First of all, let's link to the css that Josh made. So, ‘link’, then ‘tab’, then if I start using slicknav, there it is, ‘.css’. Great! That's one part, and next I need to link to those two Javascript files, and we're going to do it here. Remember, Javascript goes down the bottom, and we're going to go ‘script’, and in this case, we're going to go source, ‘src’, and we're going to go-- there it is now, nice. 

Link your Dream Weaver, add these two of them assigned, you do that one first, and then I’m going to close that off, and then when you put in the closing for it there, so we've got our script source for that jquery for slicknav.js, and now we're doing to do the same thing for-- I'm just going to copy, and paste that. Paste it there. Make sure my tabs are lined up. I'm going to make these all line up as well, just because-- there's no real reason, but it looks-- all of that, when everything's lining up makes it easy for a visual person like myself to see. So, let's delete this one, and let's put in the other one, which was jquery. There it is there. 

So, those two, both need to be there. Let's hit 'save', and now let's go and have a look. Fingers crossed. It doesn't work, looks exactly as it did before. And I know why. Let's go back into Dream Weaver. When you're putting in this Javascript at the bottom, make sure that this one here, the ‘jquery1.11.3.min’ is at the top. This thing here is the thing that Josh has created. And it references this library here, above it. If this thing appears first, it can't read below itself. This needs to be above, and that one underneath. So, that should work now. Let's hit 'save'. Let's jump out and have a look. 

Hey, that isn't working. It may not look like it, but that is the kind of bare bones here, so the slicknav installation-- this is, if you’re good till here, you've won. We're going to 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 slicknav, there's lots of different ways of kind of getting it started with. We've started with this basic demo here, but there’s ways of using-- we've just used the basic code, and you can see here, these are nice bouncy ones with all sorts of other drop downs, so if you want to go a bit more hard core into this, start with this HTML, and this Javascript, rather than the one that I've given you.

So, let's go through and have a little look. So, those drop down menu, and these things are same. Now, what we need to do next is we want to see the navigation only when it's down at mobile view. And this thing here, we want to see a tablet, and desktop. That's what I'll show you here. So, this is that line, styled. It's quite here. And we see him here, desktop, we see him here, tablet, and we don't see him at navigation. What happens is, we only see this nav-sandwich, which is, this guy. We're going to delete the word ‘menu’, but we only see that in mobile, and we see this in tablet, and desktop. So, let's go and do that with our css.

So what we need to do is we need to play around with our media queries, so let's have a look at-- first of all, let’s look at the slicknav now. I've had a look at this for you, and it's pretty good instructions, but they're really for somebody who already know what they're doing.  They’re good for me, but if you're really brand new, and you're a graphic designer, it's got to be a little tough, but what I've worked up, is that, I need this guy here, this thing called ‘slicknav_menu’, and this thing here, we're going to copy it, and you can just type yours in. 

We're going to Dream Weaver, and what we're going to do is we're going to go enter our styles. What we’re going to say, at desktop, I would like this thing called slicknav menu, and I have just played around and I've worked out this.  Slicknav menu is the name given to this box here, that little stripy line.

So, there are three that stack next to eachother, I just call 'menu'. So that's the name for these. They're called menu, and this is called slicknav menu. So, slicknav menu, what I'd like to do is-- put in curly braces '{ }'. And I'd like to do something called ‘display’. And I'd like to say, weirdly block I'd like to say, 'none'.  They always taught me when I started.  Block feels like the same as none, like, block, and don’t be in here. Block means, display it like a big block of, I don't know, wood, that's how I remember it anyway. So, I want to say, when I'm at desktop view, I would like the stripy menu here, add to display, 'none'. I don't want you to appear at all, please, semicolon, ';'. Okay, ‘save’. So, let's go look at our menu, let's look at the right one, it's kind of here. Great! 

So, at desktop, he doesn't display. At the moment though, he doesn’t display tablet, or a mobile. We're going to ignore this stuff at the moment. But, it's kind of working. It's still what we said, 'Do not display on desktop'. And what happens is, this one here flows down, and because nothing contradicts it into tablet, or mobile, and yes, it stays 'none' the whole time. 

So, what we need to do is-- actually what we'll do is, just to tidy this up, this 'h1's here, we used this color just to test earlier on, then we just used it to change the color of my heading, just that we understood what these media queries were, and how they worked. For the moment, we just have a really nice tidy one, there's desktop. And also, while I’m here, 'Desktop/Global'. People will call this 'global', this top one, and anything that overrides it, will be, in our case, tablet or mobile, but if somebody says, 'Put it in global,' they mean the top chunk. It might not be desktop, you might be dealing with, what's called mobile first. You go to your mobile, instead of your desktop at the top, but that's called global at the top there. Great!

I got a little lost, but what we need to do is, we're going to copy this whole chunk, so, 'desktop, don't display'. And tablet though, unlike display, 'block'. And, let's go and check it out. Actually, I don't want to do that, do I? I want it to be off on tablet, because my little menu, actually my mock-up in Photoshop has it off there as well. And that's on your mobile. I go here, and I ‘block’ it. Let's say 'save', let's have a look.

So, desktop, not there, tablet, not there, mobile, hello, okay. And it's that easy, kind of. So, just turned it off. The nice thing about this bit of menu that slicknav has built, is that these are tied together, so when I change, you can see, I'm here, I don't have—just this one, 'Portfolio'. 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. And all we need to do is to decide which display to show.

We've done it for the mobile one, and that works. So, it's one of the bigger menus. So, bigger menu for mobile, not for tablet, not for desktop. Let's deal with this one. So I wanted it to appear for desktop, I'd like it to appear for tablet, but when it gets on a mobile, I want you to go away, because that's going to be the menu.

And this menu is called, ‘menu’. So we're going to go to my 'styles', and what I'd like to do is when I get down to mobile view, I'd like to say ‘#menu’, and you might have noticed that we've been using full stops for these things to describe them. Sometimes we don't, sometimes we have hashes. We're just following the lead from the person who made the slicknav. This is called class, and this here is called an ID. And classes have periods in front of them, the full stops, and IDs have hashes. How do I know that's an ID? Couple of things. Easiest way was in his instructions. There it is there. It says '#menu'. And I can see it there. And I can see it has the ID of menu. 

So, these ID, or menu, I'd like to put in our curly braces '{ }'. And I'd like you to do something called 'display'. And this one here is going to be 'block', no, 'none'. I get confused. So, I don't want the menu to appear on mobile.  So let's go and have a look. We go to our preview, and this one here. So, desktop, tablet, mobile.   Little line turns off, and he turns on. So, at mobile, what happens, slicknav menu turns on. And, menu turns off. Lovely! Make it more lined up. Let's hit 'save'.

So, that's it to get kind of real basics going. Now, we're going to go for the style, because it's looking a little bit plain Jane, we want to make it look like our mobile designs. So, let's go ahead and do that in the next video...