WEBVTT 00:01.370 --> 00:02.660 Own guys will come back. 00:02.660 --> 00:09.170 This is the last lecture of this section before we start actually the final section where we conclude 00:09.170 --> 00:16.040 the things where we say goodbye where are we where I give you an ultimate task to accomplish where we 00:16.040 --> 00:17.690 start adding bonus lectures. 00:17.750 --> 00:25.910 We need to finish off what we have started here and that is creating a fully functional responsive navigation 00:25.910 --> 00:26.730 bar. 00:26.750 --> 00:32.450 Now please note that this is not really easy to create especially when we are not using any kind of 00:32.450 --> 00:33.290 framework. 00:33.410 --> 00:36.490 So everything needs to be done manually. 00:36.500 --> 00:37.600 There is no shortcuts. 00:37.600 --> 00:40.400 There is no short codes no tricks. 00:40.400 --> 00:42.440 There is easy ways to do it. 00:42.440 --> 00:44.970 There are hard ways to do it right now. 00:45.110 --> 00:52.700 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 00:52.700 --> 00:56.090 be easy to understand but take note. 00:56.090 --> 00:58.490 Keep in mind that there are plenty of other ways too. 00:58.580 --> 01:01.660 You can do it if you are not satisfied with this way. 01:01.700 --> 01:03.010 Then feel free to Google. 01:03.110 --> 01:11.250 But what I think is that this is the fastest and the most efficient way to create a fully working bar 01:11.680 --> 01:20.070 that's looking not so bad but it also takes a wide short amount of time for a fool of finished custom 01:20.070 --> 01:20.810 navigation bar. 01:20.810 --> 01:25.040 So let's start right now and if we check to the folder first. 01:25.040 --> 01:33.140 If you go to images we can see that I've included this hamburger menu inside of pictures I have created 01:33.140 --> 01:39.980 this graphic in Photoshop and especially for you and now we are going to use this graphic in order for 01:40.040 --> 01:44.590 this one to be our clickable button here or on it. 01:44.630 --> 01:52.790 So go to your HMO and the first thing we need to do is actually add the button click itself. 01:52.790 --> 01:55.130 So here it's going to be a button ok. 01:55.310 --> 01:58.780 When we click on that the menu will collapse down. 01:58.780 --> 02:06.500 OK so we're going to do this in the nav bar in the naff element here. 02:06.930 --> 02:08.830 So just remind yourself. 02:09.160 --> 02:16.940 Knopf is inside this container which is container is a bar and is now bar and the Nambour is a child 02:16.940 --> 02:24.160 of the container and then inside of this number we have a u l class and inside of this you will have 02:24.180 --> 02:31.920 a list items and inside of this list items we have HGF items soilder old child and parents to each other 02:32.250 --> 02:34.830 nested file structure. 02:34.830 --> 02:41.640 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 02:41.640 --> 02:42.690 so forth. 02:42.780 --> 02:45.160 Right now that we have that covered. 02:45.240 --> 02:47.190 Just create a blank link here. 02:47.230 --> 02:55.200 Is going to be used as our navigation menu so a class of Bugher Now if you are right and that's all 02:55.200 --> 02:59.460 you have to do so far so Bergere Now remember just class. 02:59.670 --> 03:04.530 Now what we're basically doing is following at this exact point. 03:04.530 --> 03:05.320 The first lecture. 03:05.320 --> 03:10.620 I've said that we're going to be moving these and creating this navigation bar at eight hundred and 03:10.650 --> 03:16.040 forty pixels but I've changed my mind and we're going to do that once the iPhone is disappearing. 03:16.350 --> 03:22.330 That would probably be eight hundred and twenty pixels exactly so we're going to retrieve. 03:22.620 --> 03:28.970 We're going to revamp the whole arrogation bar at this resolution OK. 03:29.460 --> 03:30.850 So right now we are eight. 03:30.870 --> 03:34.120 Eight hundred and twenty pixels of with resolution. 03:34.180 --> 03:35.770 And that's exactly this here. 03:35.760 --> 03:40.930 So we're going to completely revamp the way design a gay bar looks. 03:41.100 --> 03:42.750 Let's try to do a split view. 03:42.750 --> 03:47.610 I'll be back in a second here just let me create this Veuves for your best. 03:47.640 --> 03:49.110 A visual reference. 03:49.120 --> 03:49.450 All right. 03:49.470 --> 03:54.650 I have created this pleade view here so you can see live what's going on here. 03:54.780 --> 03:58.320 So go to your brackets and open up a CSSA again. 03:58.350 --> 04:03.840 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 04:03.840 --> 04:11.760 this so at eight hundred and twenty pixels we were to nav bar which is basically this here to hold live 04:12.080 --> 04:14.610 as shown in the index that HVM. 04:14.640 --> 04:18.470 Now here is the whole div of D list items. 04:18.830 --> 04:20.520 And the Bergrin navigation menu. 04:20.690 --> 04:21.350 OK. 04:22.350 --> 04:28.430 So we're selecting the number here and what we need to do is set the overflow to be hidden. 04:30.070 --> 04:34.370 Because this logo has a float on the left and this number has a float on the right. 04:34.390 --> 04:42.150 So if you want to limit these view here to exactly where the logo ends you need to do overflow hidden. 04:42.190 --> 04:48.670 Otherwise this container is blue box and there will go all the way to the left. 04:48.670 --> 04:49.540 So for the overflow. 04:49.540 --> 04:54.610 Hidden under navigation bar it gets cropped off and it behaves the way it should. 04:55.780 --> 05:00.000 Now let's position it absolute case right now. 05:00.020 --> 05:00.920 It's floating. 05:00.920 --> 05:05.500 It's like on top of the Web site we can move it around anywhere we want. 05:05.500 --> 05:12.920 For example a press on top 50 pixels is going to move from top by 500 pixels. 05:13.400 --> 05:16.400 So right now we can do whatever we want with this menu All right. 05:16.400 --> 05:18.040 So let's do from right. 05:18.050 --> 05:19.930 We're going to move by 30 pixels. 05:19.950 --> 05:25.750 These are those 30 pixels and from top We're going to move by 50 pixels. 05:25.860 --> 05:26.560 All right. 05:26.590 --> 05:29.430 And we're going to make the display to be block. 05:29.460 --> 05:36.580 This is because if I remove this you can see that the number is overlapping and it doesn't look very 05:36.580 --> 05:37.750 good. 05:37.930 --> 05:44.230 It's not in line so we're going to do this the old way create this and the navigation bar will be sticks 05:44.230 --> 05:46.490 to where ever we want. 05:46.510 --> 05:47.830 Now that's a first step. 05:47.830 --> 05:48.480 Good job. 05:48.490 --> 05:52.940 The next step would be to select it invisible. 05:53.010 --> 05:59.720 As of now Burgert navigation class Bergere nav is so far invisible. 05:59.820 --> 06:04.120 But if we do a big count it is invisible div of Hugh R. L.. 06:04.140 --> 06:13.440 Open up for entities double Dadds to go back to the file structure Dasch go to DS and find hamberger 06:13.440 --> 06:15.730 not Binjie do. 06:15.790 --> 06:26.910 No repeat 100 percent center and now because this is empty if we do display the block and are either 06:27.330 --> 06:39.630 we do height of 33 pixels and with 40 pixels we can see that the lead Burgard enough menu is now appearing. 06:39.690 --> 06:43.180 So this is basically an illusion of a empted div.. 06:43.350 --> 06:49.290 We've just created empty A-class whatever we have would back background to is empty glass and we have 06:49.290 --> 06:55.940 just said its height and weight are the same as the height or weight of the picture itself. 06:56.520 --> 06:59.930 Of this picture it's self. 06:59.950 --> 07:00.510 OK. 07:00.620 --> 07:07.970 So as you can see there for him by 31 pixels are put here 33 doesn't really matter if you can put whatever 07:07.970 --> 07:08.620 you want. 07:08.990 --> 07:11.820 So that's how we got this button to look here. 07:11.870 --> 07:12.270 OK. 07:12.320 --> 07:23.420 And now if we do cursor pointer deadfall actually set once you hover over it it will have a pointer 07:23.780 --> 07:24.920 as you can see. 07:25.270 --> 07:30.920 OK so it indicates that the button is clickable and Alphie do float on the right. 07:31.040 --> 07:32.740 You're guessing what would happen. 07:33.230 --> 07:36.670 It will stick on the right exactly where we want it to be. 07:36.940 --> 07:40.520 OK as you can see there so far it's looking nice. 07:40.520 --> 07:44.820 Make sure you put on the eight hundred and twenty pixel resolution here. 07:44.870 --> 07:47.160 So far it looks perfect. 07:47.740 --> 07:48.090 All right. 07:48.110 --> 07:50.460 That is the second step. 07:50.510 --> 07:59.060 The button is in place and the next step would be to select the new l lists inside NF So that container 07:59.990 --> 08:06.560 where selecting the container the navigation in this container and then d u l list which is basically 08:06.570 --> 08:07.340 this here. 08:07.550 --> 08:15.280 And if we just hide it temporarily by doing height zero and that overflow. 08:15.280 --> 08:22.910 Hidden we can see that once the element has no height it's basically invisible here. 08:23.360 --> 08:29.300 And if we said overflow hidden it will remove the whole navigation bar because right now it has a height 08:29.300 --> 08:30.380 of zero pixels. 08:30.380 --> 08:39.290 If it would do if we put 10 pixels here we can see the DDA menus are beaking off. 08:39.290 --> 08:43.650 So we were just hiding them temporarily now and that will be the second step. 08:43.710 --> 08:45.110 Or don't pay attention to this. 08:45.110 --> 08:47.140 This is the most important step here. 08:47.240 --> 08:56.340 If we create a again select the container if all of you else and not do dot open. 08:57.350 --> 09:02.920 And if you do hide outhaul and clear both Nothing will happen here. 09:02.960 --> 09:08.760 But now we have a brand new class called Open. 09:09.080 --> 09:10.170 OK. 09:10.220 --> 09:19.980 So what this does is basically restores the height of these Nav. UL previously Sethu to zero back here. 09:20.000 --> 09:31.160 So now using very very basic javascript we can do on click of these burner now menu and that the glass 09:31.160 --> 09:35.510 of open the glass of narrow you here. 09:35.570 --> 09:40.460 So it will replace the height and it will said it's hard to alto. 09:40.610 --> 09:42.220 Let's see what happens. 09:42.230 --> 09:46.040 Open up your javascript and follow along with me. 09:46.100 --> 09:57.390 Select the burger nav which is basically this button here and do on click function. 09:57.850 --> 10:05.190 Open up different is here then curly brackets here and close and inside. 10:05.410 --> 10:10.700 So on click on this burger opened a function which will do. 10:10.780 --> 10:13.050 Select the container. 10:13.050 --> 10:22.400 Now have you l which is basically the here which now has a class of which now has a height of 0 pixels. 10:22.400 --> 10:34.190 Select that and toggle class open which is the very brand new class created here which adds a kite out 10:34.220 --> 10:35.200 to all of the elements. 10:35.200 --> 10:39.570 Now if you refresh Let's see what happens while nothing happens. 10:39.590 --> 10:47.590 We might we must have made some mistake here and that's probably in the Yep it's right there so instead 10:47.590 --> 10:50.170 of container I wrote coronate Tinner. 10:50.200 --> 10:57.460 So just change history correct markup and let's see what we're doing here selecting the view out and 10:57.460 --> 10:58.790 setting the height to zero. 10:58.810 --> 11:06.220 As you remember from earlier hiding those completely temporarily and then adding a new class open which 11:06.280 --> 11:13.630 adds the height of our total and now we're adding these open class on the click of this button here. 11:14.260 --> 11:20.960 We're selecting the nav UL which has a current height of 0 and we are toggling the class open which 11:20.970 --> 11:23.770 has a class which has a height of 0 2. 11:23.830 --> 11:30.500 So if we don't save and refresh if we click here I'm getting what I'm expected to do. 11:30.500 --> 11:39.290 So on the clique it's advocate out or two to you LFA class and on the dangling off it turns it off. 11:39.290 --> 11:42.990 So basically just what I wanted here. 11:43.170 --> 11:45.410 And so with this open let's continue. 11:45.410 --> 11:52.700 Anything that was a third step the next step is selecting the very same container in our view. 11:52.730 --> 11:56.140 But this time I went to slide all of the list items here. 11:56.150 --> 11:59.130 And because right now they're floated we're going to do float. 11:59.150 --> 12:05.520 None we're going to do takes the line to the right. 12:05.700 --> 12:13.260 We can do with of Aalto margin of zero and display luck. 12:13.500 --> 12:15.420 So what are we getting here. 12:15.430 --> 12:20.310 They're not displayed as England block as above. 12:20.580 --> 12:22.310 If we search for inline block 12:25.530 --> 12:31.460 we can see that the of allies are displayed as inland block into normal sea. 12:31.470 --> 12:40.440 SS But once we reach a screen size of eight hundred and twenty pixels we're setting them to be displayed 12:40.530 --> 12:43.900 as a block without margins and the with our toe. 12:43.950 --> 12:46.980 So unclick we're getting closer there. 12:47.040 --> 12:52.920 Unclick we are having these navigation bars so right now you're doing pretty damn amazing. 12:52.920 --> 12:58.740 I hope that your understanding what is going on here because we're almost done you are now understanding 12:58.740 --> 13:02.550 how this works you are understanding how to create a responsive menu. 13:02.640 --> 13:05.220 So let's not stop here now. 13:05.310 --> 13:11.700 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 13:11.700 --> 13:17.540 can do here is basically select the links which have a border on hover. 13:17.580 --> 13:24.450 So selecting the view L L I A items on hover do border none. 13:24.600 --> 13:30.170 And now nothing should be there when I have it over perfect. 13:30.180 --> 13:32.680 And now let's select again the container. 13:32.670 --> 13:35.620 Now f u l l i n g. 13:35.640 --> 13:39.980 So these are all the separate links here. 13:39.990 --> 13:40.580 OK. 13:40.860 --> 13:49.790 And just in case let's select their color to white and padding to all of the sites. 13:49.830 --> 13:55.380 Because right now they are clustered there stick to one on the another one so if you do panic on all 13:55.380 --> 14:00.590 of the sides by 10 pixels we can see that slowly they're getting their look 14:03.460 --> 14:11.960 again the display block on the face because again we need to display them as blocks because a by default 14:11.990 --> 14:13.700 is an inline element. 14:14.060 --> 14:20.810 And by adding display block these will function perfect as you can see here when it's displayed as a 14:20.810 --> 14:21.670 block. 14:22.010 --> 14:26.770 And then if I remove the padding here and if I add to the padding you can see the difference. 14:26.780 --> 14:30.700 This is def pixels padding here there and there. 14:30.860 --> 14:38.150 I'm just going to do margined zero because we have padding just in case and dare we have the final menu 14:38.150 --> 14:38.620 here. 14:38.750 --> 14:43.730 Now what we need to do is maybe add some fancy padding to it. 14:44.090 --> 14:54.270 So container now if you will if we do maybe background color of 2 8 2 8 2 8 we can see that unclick 14:54.930 --> 14:58.520 the navigation bar is appearing here. 14:58.620 --> 15:07.260 And if we do just border radious to customized furter of five pixels for example if we refresh we can 15:07.260 --> 15:10.380 see the areas are now oval perfect guys. 15:10.590 --> 15:18.120 Now all we need to do is we're seeing that the content of chocolate Budig is over lapping the navigation 15:18.120 --> 15:26.670 bar and all we have to do is do as z index as you're already familiar with this z index and just said 15:26.690 --> 15:30.850 the z z index of now Burtt to be 1000. 15:30.870 --> 15:32.970 And that should fix the problem. 15:33.210 --> 15:38.020 And now what's left to do is when we click on it we can see that. 15:38.380 --> 15:44.330 And it's close very close to this box here and it's black boxed in navigation hamburger menu. 15:44.320 --> 15:45.780 And I don't want that. 15:45.780 --> 15:53.670 So all we need to do is on BRUGUIERE menu just add a margin to the bottom of 10 pixels and then there 15:53.670 --> 15:54.730 you go. 15:55.170 --> 16:00.840 So this is a pretty functional menu here as you can make these buttons function. 16:00.840 --> 16:09.840 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 16:09.840 --> 16:15.510 the ID actually we are having an ID here of app features. 16:15.650 --> 16:24.110 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 16:24.110 --> 16:26.530 bring me to the app feature section. 16:26.690 --> 16:34.270 So we have a fully working navigation bar custom made in less than 15 minutes. 16:34.310 --> 16:39.530 Now that is basically awesome because now you can customize these nav bar as you want. 16:39.530 --> 16:47.390 Now that the functionality is there all you need to do is edited as you want maybe increase the with 16:47.390 --> 16:51.420 maybe change a color maybe do text lines. 16:51.440 --> 16:53.540 It's all about you now. 16:53.610 --> 16:55.910 Now destry have that functionality finished. 16:55.910 --> 16:57.420 Congratulations. 16:57.500 --> 17:03.400 This was the final technical part of the website creation in the following section. 17:03.410 --> 17:05.750 We going to be saying goodbye to each other. 17:05.750 --> 17:07.370 We're going to send some thank you notes. 17:07.370 --> 17:15.140 I'm going to give you a final project that you should create before actually after you completed this 17:15.130 --> 17:23.690 course and then be ready for the upcoming free bonus lecture that will be added over time on this course. 17:23.840 --> 17:26.130 So guys see you in the next section. 17:26.150 --> 17:27.350 Thank you for watching.