How to make a burger menu 3 line mobile navigation for a website

Hi there, in this video we are going to create a Mobile Nav Sandwich, that when you click it a mobile pops out, clicks back in when you click it again. We're going to use jQuery to do it all in VS code. Let's jump in now and work out how to do it. 

For this one we're going to close down our current website, and we're going to stick it in its own pages, just so that you've got a version of this, like a vanilla version that doesn't-- because like, if you start implementing it now into our site, there are lots of this CSS. There's resets that we might have to deal with, and lots of things that you might not. So I was going to do a nice, like pure version of it, and then in the next video we'll integrate it back into our big site. 

So let's make a new document, 'File', 'New'. This one's going to save it. I'm going to call this one, what are we going to call it? We're going to call this one jQuery nav. 'jquery-nav.html'. We're going to save it. We're going to put in our normal Head tag stuff. I'm going to link two files to it. We're going to have some CSS, let's go 'File', 'New file', and we're going to go, I'm going to save this, and we'll call it           jquery, nav.css. Nice, and we'll have one more file, that we haven't had before, is a JavaScript file. I'm going to call this dot js, '.js'. It's probably more common to call it maybe script, or scripts, plural. .js, it doesn't really matter what you call it. 

We've got three files, let's link them all together to the HTML. So up the top here, before the closing of the Head we're going to link our CSS, so link css. Ours is not called style, it is called, jquery.css Now we want to link our JavaScript. So in this case it's not linked, it's called Script. We want this one called Script Source, and the source is going to be, it's in our root folder, and it is called jquery.js; nice. So we've connected these three pages, let's separate them out a little bit. 

This is a cool little option, now that we've got three files, I can drag this one and say I want it over here, then grab JS, and have it over here, we're going to have three up, look at that. So first thing we need to do is we're going to put in the little Nav icon. You can have anything, it can be a button, it can be text. We are just going to have in our body here, we'll have an image, so we're going to use an image, and it is going to-- I've got this one for you in your Exercise Files, there's one in here, Project3. There's an icon in here called Icon Burger Menu, looks like that. Now I got that from Font Awesome, and I just downloaded the SVG.

 You might decide to use the icon version. Remember, we learned how to do icons on a page, where we put it in the Head tag, and link to it, using the I-tag. Don't worry, we're just using an image. You can use anything you like, so I'm going to copy it, find my local folder. I'm going to paste it in my Images, wrong one. Desktop, Project3, put it in images, and paste it, there it is there. So let's go and find that one. So it is under Images, images/icon burger menu. And this is going to be my mobile menu icon. Getting into a habit of writing Alt text. Now let's preview it in a browser. Turn it off, turn it on again. All right, giant icon. Because this is an SVG you can scale to the bounds of the document, and our document happens to be that wide, so it goes all the way. 

So what we're going to do is we're going to say actually, before this closes the Image tag we're going to add a Style of width, and we'll say, you're a width of 20 pixels. Save it, let's have a look, 20 pixels. I'm going to make mine a bit bigger, just so that, because we're doing a tutorial, it might be a little easier to see, rather than Jason, the Editor having to zoom in and back out again. It probably won't help out at all, but anyway, so we've got our icon. It could just be a text with an A-tag around it, doesn't matter. Now we need, separately from that, we need the actual menu items, so I'm going to put them in a Nav tag. I don't have to go into a Nav tag but it's good html5 practice, and I want, how many A-tags? I'm going to have maybe three A-tags. 

We'll match what we're kind of doing in the next one, with my shortcuts there. It's going to go to hash, '#', and inside of this we're going to have, we'll match what we were doing before in the last project. So we're going to About Pricing, and Contact Us; cool. Let's have a look what we got. We're not going to style, it's going to just be ugly blue things, but we know how to style those into good looking buttons-ish. Man, I got fog with my throat, I can't get rid of it, so I'm going to sound a little husky in this video. 

What do we want to do? We want to turn this off because I don't want them appearing. I only want them appearing when we click on the button, and that is what JavaScript's going to do, it says, when this button is toggled, this is going to pop out and then close again. So what we'll do is turn it off with some CSS. I need to control it, so this is going to have Nav Class of, and I call this one my Mobile Nav. What I'd like to, is I'd like to style that Mobile Nav. mobile-nav, just to be off. We've done this kind of before, we did display:none to turn things off, and we turned it on with Media Queries. Now we're going to turn it on and off using JavaScript. 

So it should not appear now, awesome. Nothing's working now, like nothing is connected, right? It's the JavaScript that's going to connect the two. So at the moment we just have an icon sitting by itself, we have a Nav underneath it, that has turned off by default, not connected. So next part we need to call our JavaScript library, or jQuery library, because JavaScript is understood by default in the browser, but jQuery needs a little bit of library added at the top here. So just like we have loaded, remember Google Fonts at the top, because the browser doesn't know what Google Fonts is to start with, it has to be loaded at the top here. Same with our CSS reset, we kind of load it at the top. So we need to go and find it. code.jquery.com is a good place. There are other CDNs, so Content Delivery Network, but jQuery is a great one, that's what most people use. 

We need to load it into the page. At the moment we're at jQuery 3, well, 3.4.1 You'll be in the future, it will be 3.5.1, or whatever it is, get the latest version, but you don't have to keep upgrading it. The stuff that we're going to do right now is stuff that's been in it for ages. So we can use basically any of these, we're going to use the uncompressed version. In here it says, "This is the script to put into your website." We're going to click this little 'Copy Clipboard'. Now if you haven't got all this I've tried to make it easier. So in your Exercise Files, Project3, I've got, what is it called? jQuery Mobile Nav, open that up, and that's the CDN there, that's the link that we're at, and this is what I've just copied out, you can go grab that if you like. 

+ is the code we're going to write if you want to cheat. Actually, that's there twice, yours will look nicer. So we need to paste that into the tag of our document. I might just make this a little bit bigger. What we're going to do is, underneath here we're going to paste it in. No, we're not, grabbed the wrong thing. Copy to clipboard, copied, let's put it into VS code. It's not copying, you lie, I'm going to grab this version, and it goes in, in the Script tag, just like, this script's getting called. This script gets called next, now this is a big problem, because this is getting called afterwards, so this is the library, right? This is telling the browser everything it needs to know about jQuery, so that it can run it, but it's loading it the wrong way around. It needs to learn everything before it can run yours. 

So this needs to be above, and then this goes underneath. I'm going to close down this CSS panel here because we don't need that anymore, and let's look at the JavaScript that's required. First up we want to start writing our JavaScript, and we want to tell it first of all that we're dealing with jQuery, and for this to work properly we need to make sure that, before it starts doing any other things that I wanted to do, like the toggle, I need to make sure that the page is loaded. So we need to say, the document needs to be ready, before you run, in brackets, a function, or the function that I'm going to write. So function is just a placeholder for the thing I want it to do. You give it some parameters by putting in a couple of brackets, and inside of here you can run parameters. We're not going to, we're going to leave it blank. Just after that, but before the last bracket, is where we put in our curly braces, and inside these curly braces was where all of the magic needs to go. 

At the end you put in a semicolon, like CSS, to say I'm done. So at the moment all it's doing is saying, yes I'm using jQuery, and what I'd like you to do is, don't run all of the stuff in those curly braces until the page is loaded. So like CSS we're going to put in a return just to separate them out. You can have it all together, and what I'd like to do is, again, I want to make sure it knows that we're running jQuery, but the shorthand for jQuery is just a dollar sign. So nobody writes jQuery, they just write dollar sign, and what we'd like to do is, inside of brackets we would like it to-- so brackets, and then inside of parentheses, do you want to say that? Quotation marks, single little dots. 

I want to now attach myself to the icon. So at the moment we've got an image, there's an icon, an SVG. I've got no kind of like way of connecting to it. So we're going to give it a Class name, we're going to say, you have a class of, we'll call it Burger Menu. So up here I want to say, when the document's ready, I want you to look for the Burger menu, and when it is being on click, I would like you to run this function. Same again, we put in the brackets, then just after, in between the last two, we put in our curly braces, put a return in. So, we are saying wait for the document to load, then run this function. This is the function because it's just inside the curly braces. So when it's ready do this, and what is it doing? It's saying look for the Burger menu, and wait for a click, and then do this other thing, this other function. 

This function, same sort of syntax. Dollar sign, say, this jQuery, inside of our inverted commas, I need to work out what the name of that is. What I'd like you to do is, find, on my page, my Mobile Nav, and turn it on. So let's make sure it's Mobile Nav. I would like you to toggle it, toggle, brackets, and then finish that off, don't want to do anything else. Now toggle doesn't really do anything, other than it's going to look for that CSS we've got, and turn it to its opposite, so at the moment it says-- where is our proper CSS? There it is. At the moment it says, display:none. It's going to toggle that and become display:block. Awesome. That should work, let's save it, let's have a little look. Where are you, toggling, toggle, toggle. 

That, my friends, is a super simple, but super effective mobile navigation using JavaScript, really just jQuery. Now a couple of other important things to know about using JavaScript, is, in Visual Studio Code here, it's very common to have the Script tags. So anything that's JavaScript, so what we've got, two parts, we've got my one that we made, then we've got this, which is the CDN, that's been delivered by code.jquery.com. This is all JavaScript. It's better to have it at the bottom of the page, just before the closing of the body. It's kind of a weird one, like, do you think you'll see it on the page, let's have a look.

 Nothing changes, it still works, and it can't be seen because it's inside those Script tags. It's just really common practice, you can have it at the top. It's just common practice to have it at the bottom for a couple of-- the main reason is Page Load Speed. So this is actually quite a big library to download. So what can happen is the browser can load all the things on the page super quick. So the user can see them, and then later on when it gets to it, finally loaded the pages, it can load the Scripts, and can take its time to do that, but we're talking like seconds here, milliseconds. So it's fine to have it at the top, but if you've got people racing through your site, like click, click, click, what might happen is they'll get to a page, try and click on something, and nothing will appear, because it's still trying to work its way through this. 

The other big thing is just make sure this, the order is right. So you need to load the Library first, then your Script. Cool, so we've got the basics in. A couple of little things you can do to tweak the jQuery, this toggle value here, we can actually add some attributes to it. We can say, in quote marks, we can say, "Go slow," Save it, and preview it, let's click on it, goes very slow. You can imagine, you could type in fast. It's true, you can make it go fast. Click on that one, nice and fast. If you're really particular you can type in milliseconds. So you get rid of the quotes, and just type in straight-up. That is one second, 1000 milliseconds. So I could put it in for three seconds, let's have a look. Extremely slow. There you go. 

What else? I'm going to go back to just leaving it default, look nice. So we've just used plain old toggle. There are some other kind of similar ways of turning it on and off, toggling. Let's look under-- so I'm just at w3schools com. It's really nice and clearly described place. So the tutorials, we'll look at JavaScript, jQuery, and we're looking at these effects here. I think Hide Show is just our regular old toggle, he's in here, but there are, like you can do a jQuery Fade, let's have a look. So you can kind of see, it says jQuery fade toggle. It needs to be this kind of Camel Case, which is kind of strange, we haven't done that yet. 

You can kind of understand why it's Camel, right? It's got a big hump in the middle, or it's got uppers in there, so it has to be exactly written that way. So I can say, Fade, uppercase T, for toggle, and let's have a little look. Go back to my menu, there he is there, Fade Toggle. There is a Slide Toggle. Slide Toggle, capital T; exciting. So we're not going to go through and start styling those menus, because we've got the structure kind of working, but now we need to implement it into our big site, because at the moment we only have a Mobile Nav. We want to do the whole switch from Desktop to Mobile. We'll do it in the next video but basically this whole group, we're just going to delete. Don't want to delete, we're going to disable it, and only turn it all on for Mobile, and we're going to have a completely separate menu for Desktop. Easy to say, let's go and actually implement it in the next video.