1
00:00:00,520 --> 00:00:05,860
A drop down menu allows users to select for multiple options in a dropdown list.

2
00:00:05,950 --> 00:00:11,830
This HDMI outage shows an example of a drop down menu when we click the menu button.

3
00:00:11,830 --> 00:00:19,420
The list appears with four options to click on when we click our mouse off the dropdown list.

4
00:00:19,420 --> 00:00:20,680
The list disappears.

5
00:00:21,720 --> 00:00:32,400
To create a drop down menu we start with a div element and assign a class attribute set to drop down.

6
00:00:32,410 --> 00:00:40,110
Next we create our button inside the div the button element has a class attribute with three classes

7
00:00:40,650 --> 00:00:45,590
Button Button primary and dropdown toggle.

8
00:00:45,600 --> 00:00:51,700
We also need to create a data toggle attribute and set it to dropdown the scene here.

9
00:00:51,840 --> 00:00:56,730
This attribute is required in order for the menu to work.

10
00:00:56,730 --> 00:00:58,170
Next we have our label.

11
00:00:58,200 --> 00:01:07,560
In this case we've got we've attached a label menu to this button this band element contains a class

12
00:01:07,620 --> 00:01:11,370
set to carat.

13
00:01:11,380 --> 00:01:15,580
This creates the small arrow icon next to the menu label

14
00:01:19,700 --> 00:01:27,290
the drop down menu list items must be contained in an unordered list element with the class set to drop

15
00:01:27,290 --> 00:01:34,140
down menu next redefined define the list items one at a time.

16
00:01:34,220 --> 00:01:40,130
So here we have four list items each has a link attribute and a label.

17
00:01:40,130 --> 00:01:50,540
Option 1 option 2 3 and 4 we can create a dropdown divider by adding a list item with the class divider

18
00:01:51,730 --> 00:01:59,150
so we'll go ahead and add a divider here.

19
00:01:59,210 --> 00:02:07,700
I've seen the page and when I refresh you can see that we have a faint divider after option for so after

20
00:02:07,700 --> 00:02:17,090
the divider you can continue adding additional list items so we'll add Option 5 and 6 save the file

21
00:02:18,380 --> 00:02:26,950
and we can see that option 5 and 6 are now divided from options 1 through 4 we can add dropdown headers

22
00:02:27,070 --> 00:02:28,480
by creating a list item

23
00:02:31,180 --> 00:02:35,160
and creating a class set to dropdown header.

24
00:02:35,380 --> 00:02:37,000
So just go ahead and create a header

25
00:02:41,280 --> 00:02:48,500
and you can give your header any name you like we'll call it header 1 save the file refresh the page

26
00:02:49,070 --> 00:02:58,130
and there's our header we'll create another header after divider call it header to

27
00:03:03,560 --> 00:03:09,770
a list item can be disabled by applying a class set to disabled on the list item.

28
00:03:09,770 --> 00:03:15,710
So if we wanted disable Option 1 and 2 you simply give it a class of disable

29
00:03:22,550 --> 00:03:30,680
then we can no longer click on option 1 or 2 we can write a line the drop down menu using the drop down

30
00:03:30,680 --> 00:03:31,190
menu.

31
00:03:31,190 --> 00:03:31,640
Right.

32
00:03:31,640 --> 00:03:38,270
Class in this class must be added to the UL to the UL element

33
00:03:43,450 --> 00:03:48,850
and after refreshing the page we can see that the menu now appears on the right side.

34
00:03:53,900 --> 00:03:55,010
Remove that for no

35
00:04:00,050 --> 00:04:04,760
and we can also change the orientation of the dropdown to drop up.

36
00:04:04,780 --> 00:04:11,800
This will cause the menu to expand in an upward direction rather than downward and to do so we simply

37
00:04:11,800 --> 00:04:16,210
change the div class here from dropdown to drop up.

38
00:04:17,920 --> 00:04:22,270
Now there likely won't be enough space for it to be visible sight.

39
00:04:22,270 --> 00:04:25,850
I'd have to make we have to create some breaks

40
00:04:29,950 --> 00:04:34,950
and we can see that the menu no comes upward rather than downward.