Voiceover: Welcome to the last video about jQuery.
In this lecture we'll create the responsive navigation.
When we made our website responsive,
we simply hid the navigation
for width less than 768 pixels.
Now, it's time to bring it back
and make it responsive using jQuery.
So, what do I mean by responsive navigation?
Well this is the normal navigation that we styled before.
Now as I reduce the browser width,
I want this to happen.
You see that?
Now we have this icon here,
and when we hit it,
our navigation comes down here.
Right?
So you're probably are quite used to this
type of navigation
because all kinds of responsive websites use it these days.
And we can see it down here as well,
so we click here and then all of this comes down.
And we can close and open it
as we want.
So, how do we do this?
First, we need to, of course,
put this button here inside our HTML file.
And then we need to style all of this here
in a CSS file, in the media query.
And in the end, we will use jQuery
to add this animation here.
And also to change this button style here
whenever we click on it.
So let's go do that.
So first as I said in the HTML file,
we're going to add that button,
in the navigation.
So it is, okay,
right here.
So we have the images, then we have the navigation,
and then in the end we want that button.
It will be a link.
And a class that I will call mobile nav icon.
Alright, and now we need that icon that we saw before.
Just close this.
So the icon, as before, we will get it from
our Ionicons.
And we have these three here,
and I am going to choose this one.
You can of course use one of the other ones if you like to.
So I will put this right here.
And next I am gonna style this.
So I grab this class name,
and where do we have our navigation.
Alright.
So we already have the main navi,
and the sticky navi,
and I'm gonna call this mobile navi.
First thing is to float this to the right side, right?
And, we can set some margin to the top
of three pixels.
And then I want the cursor
to show up as a pointer.
And let me show you why I'm going to do this.
So this is an a class,
but if we do not specify the href attribute,
which I will not do here.
Then we will not have that pointer.
Let me show it to you.
So I mean this pointer, so this hand.
So in that case, I need to specify that to know,
and I will say
cursor pointer.
Alright, so let's check this out.
It's here right now,
and that is because this navigation here is still visible.
So I of course don't want to see it,
for now, so I will make this display none.
Such as we did many times before,
so display none.
And I also need to style the actual icon, so,
this element is i element.
So in the other icons we always define their class
like icon big,
but in this case, it's not necessary.
'Cause we only use it in this place,
so I just say mobile nav icon,
and then the i element inside of it.
So I say font size,
let's say 200%,
and then color, white.
Okay.
And now, let's go to our queries, CSS,
and style that navigation.
So right here.
So this is what we had,
but this is no longer what we want here.
Let me just, instead of deleting it just now,
I want to leave it here.
So again, this is the code that will
apply once the width is below 767 pixels.
So now I want that icon to show up actually,
so mobile nav icon,
and I wanna display it as an inline-block.
Alright, so let me check that.
Here it is.
But I actually want this on the right side,
and the navigation more on the left side.
So I will say
that the main nav should float to the left.
Float to the left, alright.
And now we want those elements
no longer to be side by side,
but one under the other.
So that is quite easy as well.
Main nav and all the li elements inside of them.
What I do with them now is to
say display them as blocks,
and no longer as inline-blocks, as they were before.
So they will now force a line break,
and so we have all those links stacked
on one another.
And let me also style the actual link elements
inside of them.
So a and then link.
And visited, right?
So I want them to display as block as well.
And you know, they should have no border now
because on a mobile phone
we cannot hover anything,
so we don't need any border.
So we can just do this, okay.
So.
Alright, so this looks quite as we want it so far.
Now we just need to reduce
the margin to the top a little bit,
and then maybe we can also increase
maybe the font size here,
looks a little too small, I think.
We had it set to 90% and we can
set it back to 100.
We just look, how it looks down here, alright.
So, reduce the margin here
and maybe add some padding between those links as well.
So let me actually see
how the main nav is styled.
Alright, so we have a margin-top of currently 55.
But I want it to be, I don't know, 25 for now,
and also some margin on the left side,
of also 25, let's say.
Okay, and now the links,
they may have a padding of 5 pixels
on top and on the bottom,
and then zero left and right.
So let's check this.
Okay, great.
Maybe we can even say 10 pixels,
and 25 here,
that doesn't look enough.
So, on top maybe 35,
and here 10.
And as I said before,
I will increase the font size as well,
to 100%.
And now this should do the job.
Alright.
So what we also need to do, of course,
is to style the sticky navigation.
Let me just copy all of this,
and I will then later
delete the stuff that I don't want.
So you see this is a lot of work to do,
and it's quite confused,
but well, you still need to do it.
Let me set it to 10 pixels here as well,
and the color, doesn't really matter here for now.
And this also, the same.
And we can say this to 10.
So let's check this out.
Alright, great.
Now only one more thing which is
to make this icon here black.
In the sticky navigation, right?
Otherwise we will not be able to see it.
So it's simple,
sticky mobile nav icon,
and then i, and color,
555, such as the rest
of the webpage.
And now this will look exactly as we want it.
Actually not, actually we want less space now.
Let me check this again.
So we have 30 pixels now and,
that's way too much, of course.
So duplicate this,
and margin-top, 10 pixels.
Okay now, great.
So, now comes the jQuery part.
We need to start by hiding this again.
Because, of course, when we open the webpage,
this will not be visible.
And then, when we hit this button here,
it will become visible.
Okay, so let me
take those comments away.
Because then the display will be none again,
so this will be hidden.
And now let's define
what happens when we click on that button.
Back to jQuery.
Mobile navigation.
So let's define a class for JavaScript
when we hit this button.
Such as we always do,
and this will be nav icon, very simple,
so we just copy this
because now we need to select it
here in the jQuery.
So, and now
if you can imagine this, this is click,
and function.
And now let's use something new,
which is called variables.
So in programming we have something called variables,
where we can store things.
And here I will simply create
a variable called nav,
and what this variable will be,
is the result of selecting the navigation.
So let me just show it to you.
So, main nav.
And actually we should create
the class for that as well.
So here, js main nav.
So, and I did this because
I will have to use this many times now,
and I don't want to repeat
this code here all over again, and again, and again.
So I define a variable,
and then I can use that variable instead of
always writing the same code.
So now what are we gonna do with this?
There's a very simple
jQuery method,
which is just called slide toggle.
And all this does
is to open and close a box.
And we will see that in a minute.
And here, in this method we have to
just say how many time the animation shall take.
And we will say 0.2 seconds,
which is 200 milliseconds.
Such as here,
where we said we wanted
a thousand milliseconds, here we want 200.
And this is actually all it takes
to create that open and close effect.
So we click here and it opens, and it closes, and it opens,
and it closes.
This creates exactly what we want, right?
So now there's only one thing left to do,
which is to change the icon of this,
each time we click it.
So, if this is the menu icon,
we want it to be like
cross to close it,
and when it's a cross,
we want it to be the close icon.
Really straight forward, right?
So first of all let's grab an icon
for that, and it will be this one, I think.
So make this a little bigger again.
So this looks good.
So this was the first part of the code,
let me just copy this here, I'll use it now.
And so, how can we change that icon?
It's easier to explain here.
So, the icon is essentially defined by the class.
So, if we want to change the icon,
we can simply change the class.
And we already did that before,
with the add class and the remove class.
So we will now do exactly that.
And I will in fact create a new variable here
called icon.
So that I don't have to repeat that code later again.
And this is now js nav icon i
because that is in fact,
the class or the element which has
the class with the icon.
So now I can make a simple if again,
which is to take decisions.
So I say, if icon
has class, so this is something new we didn't see before.
And I will say,
ion nav icon round so this is the class name.
Well then do something,
and if not,
then do something else.
So again, so if the icon,
which means if the element we select here
has the class ion nav icon round,
then we want the icon
to have another class.
Which is this one.
So we want to add this one
and we want to remove the old one.
So remove class,
and then this one.
So this will simply exchange the icons.
So when it is the navigation icon,
take that navigation icon away
and put the close icon instead.
And if it's the other way around,
then, well,
then add the nav icon
and remove the close.
And now we have all situations covered.
So this should work now.
I just need to correct this one here.
And now we should be ready to go.
And here we go.
This works exactly as we wanted.
And up here as well, great.
Very good.
So we have all kinds of effects now here on our webpage,
even if the responsive version,
it all works the same.
Fantastic.
So, this is all I had to show you about jQuery.
jQuery has endless possibilities,
and there is still so much to learn.
And there are in fact entire books
and online courses devoted to teach you jQuery.
So you see, this is a really huge topic,
but I think you know some of the basics now.
And that actually enables you to write some simple code
on your own, or to include
one of the many, many jQuery plugins
into your project.
And that is already quite powerful.
Now as before, you can find a link,
where you can download the entire project
we've built so far,
in the description of this video.
Now in the next couple of lectures,
we'll optimize this webpage,
and then learn how to launch it.