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.
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.
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.
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.
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.
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.