WEBVTT

00:00:07.470 --> 00:00:13.580
In this video we're going to learn how to use the query you buy to create menus.

00:00:13.950 --> 00:00:17.880
First this creates a list inside our first div.

00:00:17.900 --> 00:00:20.020
So it's going to be an unordered list.

00:00:20.820 --> 00:00:26.240
And we are going to give it an ID.

00:00:27.300 --> 00:00:29.930
Continents.

00:00:30.330 --> 00:00:36.230
There are going to be some list items there continents.

00:00:36.270 --> 00:00:42.720
So this whole five list items go for Europe and Africa

00:00:46.590 --> 00:00:47.160
America

00:00:50.550 --> 00:00:54.280
Asia Australia.

00:00:55.500 --> 00:00:56.040
OK.

00:00:56.340 --> 00:01:02.460
And we're going to create a another level so inside the first list item we're going to have another

00:01:03.060 --> 00:01:07.550
sub list.

00:01:09.710 --> 00:01:10.610
OK.

00:01:10.620 --> 00:01:14.330
And let's place some trees.

00:01:14.460 --> 00:01:15.470
So it's

00:01:19.610 --> 00:01:22.130
of France

00:01:24.630 --> 00:01:30.630
U.K. and Spain.

00:01:31.560 --> 00:01:33.070
And now we're going to go another level.

00:01:33.090 --> 00:01:40.080
So the U.K. includes a few countries so we're is going to create another sublists inside the U.K.

00:01:40.080 --> 00:01:46.710
.

00:01:46.740 --> 00:01:47.940
OK.

00:01:48.210 --> 00:01:48.690
So

00:01:53.000 --> 00:01:55.680
we're looking at England

00:01:58.890 --> 00:01:59.580
Scotland

00:02:03.450 --> 00:02:09.350
Wales and Northern Ireland.

00:02:12.490 --> 00:02:17.180
They say the signing of Facebook and said the heights to O2.

00:02:17.610 --> 00:02:18.700
That's better.

00:02:18.770 --> 00:02:28.830
And OK so now to create the menu using music where are you why we access the lists using ID which is

00:02:28.850 --> 00:02:34.950
continents and then we'll use a method called menu at the moment.

00:02:34.950 --> 00:02:36.790
We don't need any properties in that.

00:02:36.870 --> 00:02:40.420
So if you refresh the page so we can see how it looks like.

00:02:40.620 --> 00:02:50.520
OK so we can do with all the list items so we can use we can access the class.

00:02:50.780 --> 00:02:54.570
You are my money.

00:02:55.620 --> 00:02:59.950
Then you do with that.

00:03:00.240 --> 00:03:02.970
This is two hundred pixels.

00:03:04.200 --> 00:03:05.530
OK.

00:03:05.550 --> 00:03:06.150
That looks better.

00:03:06.150 --> 00:03:11.560
So now we can see the next level and third level as well.

00:03:11.700 --> 00:03:12.040
OK.

00:03:12.120 --> 00:03:15.660
So that's how menus work.

00:03:15.750 --> 00:03:18.250
Sometimes we want to show.

00:03:18.380 --> 00:03:25.750
So rather than having a second level there so we don't have categories under the categories we can have

00:03:25.750 --> 00:03:25.790
.

00:03:25.790 --> 00:03:29.500
The second level showing under that category.

00:03:29.610 --> 00:03:37.920
OK so we can create another menu in the next div and we're going to have categories and the next level

00:03:37.920 --> 00:03:40.090
is going to show under the categories.

00:03:40.200 --> 00:03:40.740
OK.

00:03:40.980 --> 00:03:44.070
So all we're going to do we to copy paste

00:03:46.710 --> 00:03:51.480
this list inside of Dave.

00:03:52.060 --> 00:03:53.860
OK.

00:03:54.180 --> 00:03:59.510
And going to the signing of the apple dippers well to to heights.

00:04:00.010 --> 00:04:00.630
Right.

00:04:00.830 --> 00:04:01.140
And

00:04:04.020 --> 00:04:15.820
we're going to give it an idea continues to create the menu using the equerry method.

00:04:15.940 --> 00:04:17.150
OK.

00:04:17.750 --> 00:04:19.360
That's similar at the moment.

00:04:19.740 --> 00:04:25.110
OK so as we said we want these first level items to be categories.

00:04:25.230 --> 00:04:35.250
OK these items are not going to be containing other lists so first if we look at Europe which is going

00:04:35.250 --> 00:04:51.770
to close the tag there we're going to have these items as these items after the category.

00:04:52.680 --> 00:04:56.040
What we need to add one more thing.

00:04:56.970 --> 00:05:05.090
So the category needs a class game.

00:05:07.680 --> 00:05:11.800
It's called UI.

00:05:11.910 --> 00:05:18.480
We just had a OK and we can already see the styling has changed.

00:05:18.690 --> 00:05:19.120
Okay.

00:05:19.240 --> 00:05:22.810
And we need to copy this class to all the categories.

00:05:22.930 --> 00:05:26.030
OK so it's going to be the same thing for this one.

00:05:26.060 --> 00:05:30.360
This one is on this one.

00:05:31.380 --> 00:05:33.720
OK.

00:05:33.990 --> 00:05:39.060
So now we can see the next level there that we can just access.

00:05:39.180 --> 00:05:42.630
You know the third level from the right.

00:05:43.110 --> 00:05:47.360
OK so that's how menus work with the query.

00:05:48.020 --> 00:05:51.480
In the next video will look at progress bus