Please subscribe to watch this video
Let's click 'Save', now let's go and close it down. So we just made it, and closed it down, because now we need to link it to this index.html file. We can see up here, in my index, and source code, and you can see here, the styles.css, this was done automatically for us. We need to do this manually, so we need to put a 'return' in. And we need to go to 'Insert', and go down to 'Scripts'. Click on 'scripts' again, and it knows it's going to the js file. Find 'Script's, click 'Open'. And there you go, there is a link together. Hit 'Save', and you can see, there's my styles.css, and now, my new little Scripts file. This Burger Menu up here is because it's in svg. If you use the png version of our little menu before, this won't appear there. Just ignore him for the rest of the course.
And here, it says-- this is the link for jQuery, I'm going to grab it all. Actually, starts up there, grab all of that chunk. What I've done for you is, I've put it in your exercise files. Under Code, there's something called jquery cdn. You don't have to come here, you just copy and paste my one. So I'm going to copy it, and all we do is dump it in here. And that just tells it where the library is. Why do we just not have it locally? We've got scripts.js in our css, on my machine. The reason is because this is a really big library. And the benefit of using, say the one hosted by Google, it means that, say a user is surfing the net, and they go to 10 sites, they all use jQuery because loads of sites use it. When they get to your site, and the browser goes "Oh, I'm going to have to load jQuery," and it goes, "Don't worry about it, I won't load it because I've already loaded it from the other website I was at last." That's why we use a CDN and link to a website, rather than having it actually on your machine. Just means that Google's going to have it online all the time, loads of people use it, and you don't have to download it like a millionth time when they get to your site because it's just that same old one that's been linking to there again.
First bit, is we're going to put in our brackets. Inside this bracket, we're going to write the word 'document'. Thank you, code helping. After the brackets, we're going to type in 'ready'. This just means that, jQuery, don't load until the document's ready. Because what can happen is, jQuery can start doing its thing before the document is even loaded, or the whole page is loaded. And it just causes lots of errors. So what we just say is, wait for the document to load, and then do your thing. And you find you don't get any errors. The next thing we need to do is tell it to do something. So in brackets, we say, do something, please. But we don't call it 'do something please', we call it a function, just think, I would like to do something, but code language is called a function. And now we put in a set of brackets. Set of curly braces, and at the end, we put in a semicolon.
These things here, I never really do anything with these first set of brackets. These are attributes that, normally they're just left into. These curly braces are the really important parts. We're going to put all the things we want to do inside of this. And lastly, this semi colon just means, finished here, "I'm done, I've finished writing my jQuery, don't go any further." All of the good stuff goes inside these curly braces. I could type it out here, but it's going to look a little messy, so I'm going to undo. And what we'll do is, we'll put a return in between. And we'll just type them in here.
Now I want to say again, I'd like to say, jQuery, but instead of saying that-- jQuery is a long word, what the shorthand is, is the dollar '$' sign. So dollar sign, just think as the shorthand for the word jQuery. So I'm going to replace this one up here because you'd be weird if you were using the word jQuery, everyone uses the dollar sign. So we're saying, "jQuery, I would like to do something." And in this case we're going to use brackets again. Inside of these brackets, I would like to add apostrophes. No, quotes, apostrophes. Because what I'd like to do is I'd like to do something with the Class remember, period, for Class. Something with the Mobile view.
What would we like to do with them? I'd like to look out for a click, so when you're clicked, I'd like you to, brackets, do something. Remember, we don't use the word 'do something', we use the word 'function'. Same bit of queries and syntax. Brackets with nothing in it. Semi colons, where the good stuff goes, and at the end we put a semi colon to say, don't go on past here, please. So, in where the good stuff goes, hit 'return'. Same as above, dollar sign for jQuery. Same thing with the Class, we're going to put in apostrophes, a dot. 'desktop--view'. What would we like to do to this Desktop view? I'd like to add this thing, instead of a click, this one's going to have a toggleClass. And that toggleClass is going to toggle this thing called apostrophe expand.
Remember that Class we made earlier? Weirdly, we don't write in the full stop for this particular one. Just leave it off; doesn't work. Gets to the end here, I say, don't read anymore. And that is going to hopefully make our menu work. So let's back date it. We're going to say, there's an 'expand' Class that I have. I'd like to toggle it on and off, Desktop view, when Mobile view is clicked. If that was a mind bender, and there's commas and apostrophes flying all over the place, I've created a code you can copy and paste in your exercise files, you can go download those, they're free.
So that is, writing some jQuery. Let's go see if it works, that's the main thing. Remember, 'Save All', jump into our browser. Bring it down, click the button. And it doesn't work. I have to pause this, figure out why it's not working. Be right back. Okay, I'm back, and I've figured it out. Happens to the best of us. I really want to re-record the video, and make me look super awesome but I also want to let you know that it always happens, happens to everybody. And what I did was, under styles.css-- it's actually working, I tested it and at the expand, Class is getting added, so it's nothing wrong with the jQuery, it's the styles.css.
What's happening, I put this in, in order to expand in Desktop, but I don't actually need this thing, because it's in Global, I need this to be in Tablet and in Mobile view. So I'm going to grab this - you're in the wrong place - cut him. And I want you to be in-- you can see, my Media Query here, this is for my max-min for Tablet. So just before the ending of the close bracket, see, that's the opening. And there's the closing there, I'm going to put him in. So I need to copy it in there. And down at Mobile view, I need to copy you there. All right, oops. Now let's go and test. Now click on it, still not working, hit 'Refresh'. Now it's working, click, click, our jQuery works. It still looks ugly, I know, there's some layout to be done, but we'll turn that into another video, because this one could be the longest video I've made in my video career history.
So, that is our jQuery, clicky, Mobile and Desktop drop down menu thing. Now let's make this menu look kind of nice.