Own guys will come back.
This is the last lecture of this section before we start actually the final section where we conclude
the things where we say goodbye where are we where I give you an ultimate task to accomplish where we
start adding bonus lectures.
We need to finish off what we have started here and that is creating a fully functional responsive navigation
bar.
Now please note that this is not really easy to create especially when we are not using any kind of
framework.
So everything needs to be done manually.
There is no shortcuts.
There is no short codes no tricks.
There is easy ways to do it.
There are hard ways to do it right now.
There are a lot of ways to do it but right now I'm going to show you one way how to do it and it should
be easy to understand but take note.
Keep in mind that there are plenty of other ways too.
You can do it if you are not satisfied with this way.
Then feel free to Google.
But what I think is that this is the fastest and the most efficient way to create a fully working bar
that's looking not so bad but it also takes a wide short amount of time for a fool of finished custom
navigation bar.
So let's start right now and if we check to the folder first.
If you go to images we can see that I've included this hamburger menu inside of pictures I have created
this graphic in Photoshop and especially for you and now we are going to use this graphic in order for
this one to be our clickable button here or on it.
So go to your HMO and the first thing we need to do is actually add the button click itself.
So here it's going to be a button ok.
When we click on that the menu will collapse down.
OK so we're going to do this in the nav bar in the naff element here.
So just remind yourself.
Knopf is inside this container which is container is a bar and is now bar and the Nambour is a child
of the container and then inside of this number we have a u l class and inside of this you will have
a list items and inside of this list items we have HGF items soilder old child and parents to each other
nested file structure.
Here I hope you know what is going on here so a is a child of Elyot allies child of us and so on and
so forth.
Right now that we have that covered.
Just create a blank link here.
Is going to be used as our navigation menu so a class of Bugher Now if you are right and that's all
you have to do so far so Bergere Now remember just class.
Now what we're basically doing is following at this exact point.
The first lecture.
I've said that we're going to be moving these and creating this navigation bar at eight hundred and
forty pixels but I've changed my mind and we're going to do that once the iPhone is disappearing.
That would probably be eight hundred and twenty pixels exactly so we're going to retrieve.
We're going to revamp the whole arrogation bar at this resolution OK.
So right now we are eight.
Eight hundred and twenty pixels of with resolution.
And that's exactly this here.
So we're going to completely revamp the way design a gay bar looks.
Let's try to do a split view.
I'll be back in a second here just let me create this Veuves for your best.
A visual reference.
All right.
I have created this pleade view here so you can see live what's going on here.
So go to your brackets and open up a CSSA again.
And as you can see now we are ready to go now what we need to do is at this or solution do not forget
this so at eight hundred and twenty pixels we were to nav bar which is basically this here to hold live
as shown in the index that HVM.
Now here is the whole div of D list items.
And the Bergrin navigation menu.
OK.
So we're selecting the number here and what we need to do is set the overflow to be hidden.
Because this logo has a float on the left and this number has a float on the right.
So if you want to limit these view here to exactly where the logo ends you need to do overflow hidden.
Otherwise this container is blue box and there will go all the way to the left.
So for the overflow.
Hidden under navigation bar it gets cropped off and it behaves the way it should.
Now let's position it absolute case right now.
It's floating.
It's like on top of the Web site we can move it around anywhere we want.
For example a press on top 50 pixels is going to move from top by 500 pixels.
So right now we can do whatever we want with this menu All right.
So let's do from right.
We're going to move by 30 pixels.
These are those 30 pixels and from top We're going to move by 50 pixels.
All right.
And we're going to make the display to be block.
This is because if I remove this you can see that the number is overlapping and it doesn't look very
good.
It's not in line so we're going to do this the old way create this and the navigation bar will be sticks
to where ever we want.
Now that's a first step.
Good job.
The next step would be to select it invisible.
As of now Burgert navigation class Bergere nav is so far invisible.
But if we do a big count it is invisible div of Hugh R. L..
Open up for entities double Dadds to go back to the file structure Dasch go to DS and find hamberger
not Binjie do.
No repeat 100 percent center and now because this is empty if we do display the block and are either
we do height of 33 pixels and with 40 pixels we can see that the lead Burgard enough menu is now appearing.
So this is basically an illusion of a empted div..
We've just created empty A-class whatever we have would back background to is empty glass and we have
just said its height and weight are the same as the height or weight of the picture itself.
Of this picture it's self.
OK.
So as you can see there for him by 31 pixels are put here 33 doesn't really matter if you can put whatever
you want.
So that's how we got this button to look here.
OK.
And now if we do cursor pointer deadfall actually set once you hover over it it will have a pointer
as you can see.
OK so it indicates that the button is clickable and Alphie do float on the right.
You're guessing what would happen.
It will stick on the right exactly where we want it to be.
OK as you can see there so far it's looking nice.
Make sure you put on the eight hundred and twenty pixel resolution here.
So far it looks perfect.
All right.
That is the second step.
The button is in place and the next step would be to select the new l lists inside NF So that container
where selecting the container the navigation in this container and then d u l list which is basically
this here.
And if we just hide it temporarily by doing height zero and that overflow.
Hidden we can see that once the element has no height it's basically invisible here.
And if we said overflow hidden it will remove the whole navigation bar because right now it has a height
of zero pixels.
If it would do if we put 10 pixels here we can see the DDA menus are beaking off.
So we were just hiding them temporarily now and that will be the second step.
Or don't pay attention to this.
This is the most important step here.
If we create a again select the container if all of you else and not do dot open.
And if you do hide outhaul and clear both Nothing will happen here.
But now we have a brand new class called Open.
OK.
So what this does is basically restores the height of these Nav. UL previously Sethu to zero back here.
So now using very very basic javascript we can do on click of these burner now menu and that the glass
of open the glass of narrow you here.
So it will replace the height and it will said it's hard to alto.
Let's see what happens.
Open up your javascript and follow along with me.
Select the burger nav which is basically this button here and do on click function.
Open up different is here then curly brackets here and close and inside.
So on click on this burger opened a function which will do.
Select the container.
Now have you l which is basically the here which now has a class of which now has a height of 0 pixels.
Select that and toggle class open which is the very brand new class created here which adds a kite out
to all of the elements.
Now if you refresh Let's see what happens while nothing happens.
We might we must have made some mistake here and that's probably in the Yep it's right there so instead
of container I wrote coronate Tinner.
So just change history correct markup and let's see what we're doing here selecting the view out and
setting the height to zero.
As you remember from earlier hiding those completely temporarily and then adding a new class open which
adds the height of our total and now we're adding these open class on the click of this button here.
We're selecting the nav UL which has a current height of 0 and we are toggling the class open which
has a class which has a height of 0 2.
So if we don't save and refresh if we click here I'm getting what I'm expected to do.
So on the clique it's advocate out or two to you LFA class and on the dangling off it turns it off.
So basically just what I wanted here.
And so with this open let's continue.
Anything that was a third step the next step is selecting the very same container in our view.
But this time I went to slide all of the list items here.
And because right now they're floated we're going to do float.
None we're going to do takes the line to the right.
We can do with of Aalto margin of zero and display luck.
So what are we getting here.
They're not displayed as England block as above.
If we search for inline block
we can see that the of allies are displayed as inland block into normal sea.
SS But once we reach a screen size of eight hundred and twenty pixels we're setting them to be displayed
as a block without margins and the with our toe.
So unclick we're getting closer there.
Unclick we are having these navigation bars so right now you're doing pretty damn amazing.
I hope that your understanding what is going on here because we're almost done you are now understanding
how this works you are understanding how to create a responsive menu.
So let's not stop here now.
I don't like just hover effect on when I hover over I don't like this board or on a bottom so all we
can do here is basically select the links which have a border on hover.
So selecting the view L L I A items on hover do border none.
And now nothing should be there when I have it over perfect.
And now let's select again the container.
Now f u l l i n g.
So these are all the separate links here.
OK.
And just in case let's select their color to white and padding to all of the sites.
Because right now they are clustered there stick to one on the another one so if you do panic on all
of the sides by 10 pixels we can see that slowly they're getting their look
again the display block on the face because again we need to display them as blocks because a by default
is an inline element.
And by adding display block these will function perfect as you can see here when it's displayed as a
block.
And then if I remove the padding here and if I add to the padding you can see the difference.
This is def pixels padding here there and there.
I'm just going to do margined zero because we have padding just in case and dare we have the final menu
here.
Now what we need to do is maybe add some fancy padding to it.
So container now if you will if we do maybe background color of 2 8 2 8 2 8 we can see that unclick
the navigation bar is appearing here.
And if we do just border radious to customized furter of five pixels for example if we refresh we can
see the areas are now oval perfect guys.
Now all we need to do is we're seeing that the content of chocolate Budig is over lapping the navigation
bar and all we have to do is do as z index as you're already familiar with this z index and just said
the z z index of now Burtt to be 1000.
And that should fix the problem.
And now what's left to do is when we click on it we can see that.
And it's close very close to this box here and it's black boxed in navigation hamburger menu.
And I don't want that.
So all we need to do is on BRUGUIERE menu just add a margin to the bottom of 10 pixels and then there
you go.
So this is a pretty functional menu here as you can make these buttons function.
So for example if I do click on features I'm going to add a I id features here and if a copy and paste
the ID actually we are having an ID here of app features.
So if I copy this ID and if I place it here with a hash they in front wants to click on this it should
bring me to the app feature section.
So we have a fully working navigation bar custom made in less than 15 minutes.
Now that is basically awesome because now you can customize these nav bar as you want.
Now that the functionality is there all you need to do is edited as you want maybe increase the with
maybe change a color maybe do text lines.
It's all about you now.
Now destry have that functionality finished.
Congratulations.
This was the final technical part of the website creation in the following section.
We going to be saying goodbye to each other.
We're going to send some thank you notes.
I'm going to give you a final project that you should create before actually after you completed this
course and then be ready for the upcoming free bonus lecture that will be added over time on this course.
So guys see you in the next section.
Thank you for watching.