1
00:00:01,310 --> 00:00:07,850
Hello, in this video, we are going to take a look at dropdown, so I'm sure you know where dropdown

2
00:00:07,850 --> 00:00:11,460
is in the context of Web design, web development.

3
00:00:11,480 --> 00:00:13,510
If you don't, it's basically one of these.

4
00:00:14,210 --> 00:00:19,250
They can get a bit more complex than that just in terms of the way they look into the base code and

5
00:00:19,610 --> 00:00:22,700
now will be coming some extra features as well by the world.

6
00:00:22,700 --> 00:00:28,670
Do you provide a link to this bootstrap Web site which covers all the different features that you can

7
00:00:28,940 --> 00:00:32,230
implement into your dropdown?

8
00:00:32,240 --> 00:00:34,100
And I'm going to cover a few of them.

9
00:00:34,400 --> 00:00:38,210
But, you know, if I cover all of them, it'll be a really long video.

10
00:00:38,210 --> 00:00:44,030
And, you know, once you get the basics down, you can easily have a look and get what you need.

11
00:00:44,030 --> 00:00:45,860
And a lot of this is based on Plus's.

12
00:00:46,700 --> 00:00:51,300
OK, so to implement a basic one is pretty simple.

13
00:00:51,320 --> 00:00:56,570
You need a DB and this will have a class of brokedown.

14
00:00:58,010 --> 00:00:59,020
Well done.

15
00:01:00,320 --> 00:01:06,230
And in here we need a button for questionmark.

16
00:01:06,230 --> 00:01:17,570
Well, I accidentally pressed it and this requires a few classes, forced it, but then we all have

17
00:01:17,570 --> 00:01:19,940
a class for the style of it.

18
00:01:20,300 --> 00:01:26,000
And this essentially is this primary secondary success in warning or danger.

19
00:01:26,270 --> 00:01:33,470
And you just put BTM then, you know, these key with and these are the general sort of contextual colors,

20
00:01:33,470 --> 00:01:37,220
styles that you can implement and bootstrap a lower case, by the way.

21
00:01:37,880 --> 00:01:43,820
And I'm going to be using the warning one to drop down the toggle.

22
00:01:44,630 --> 00:01:52,280
And now what type of what data tongo.

23
00:01:53,780 --> 00:02:02,180
And this is going to just totally drop down, which will be implemented to an area that's expanded equals

24
00:02:02,180 --> 00:02:02,520
false.

25
00:02:02,530 --> 00:02:10,910
So by default, it is not expanded and most likely you won't want it to be, but you can make it if

26
00:02:10,910 --> 00:02:13,220
you want to put the text.

27
00:02:13,220 --> 00:02:14,330
OK, May.

28
00:02:15,140 --> 00:02:19,550
And now we implement the dropdown services and unordered list

29
00:02:24,770 --> 00:02:26,300
drop down.

30
00:02:29,980 --> 00:02:31,200
Stay tuned.

31
00:02:32,150 --> 00:02:35,870
And inside here, we're going to have a dress

32
00:02:39,990 --> 00:02:47,540
cake where we're just going to put a hash, which basically doesn't change the, you know, the Web

33
00:02:47,540 --> 00:02:50,450
page, it doesn't take you to another website, turn of a page.

34
00:02:50,660 --> 00:02:54,050
You can make it go to a different website or different page on your website.

35
00:02:54,170 --> 00:02:55,130
That's totally fine.

36
00:02:55,310 --> 00:02:59,150
But for the purpose of this one video, that doesn't really matter.

37
00:02:59,600 --> 00:03:04,190
OK, so we also want a classroom for class

38
00:03:07,460 --> 00:03:15,060
and the class is going to be down item and to close this off.

39
00:03:15,080 --> 00:03:20,900
And in here, you put what the item is going to display in terms of the message, the text.

40
00:03:25,400 --> 00:03:25,920
That's it.

41
00:03:25,960 --> 00:03:34,130
So if you want more, you just duplicated like so change the text here and you can change the link as

42
00:03:34,130 --> 00:03:34,430
well.

43
00:03:34,520 --> 00:03:37,820
If I refresh you save down.

44
00:03:38,210 --> 00:03:39,290
Refresh here.

45
00:03:39,920 --> 00:03:40,460
There we go.

46
00:03:40,790 --> 00:03:44,540
But if you want to move it from the top, you can get the breakthrough margin.

47
00:03:44,540 --> 00:03:44,930
Pardon.

48
00:03:44,930 --> 00:03:48,810
However, you want just toilet to get the down.

49
00:03:49,040 --> 00:03:54,880
And if I want to click one of these, it will do something else at the moment besides a hash here.

50
00:03:54,890 --> 00:04:03,110
But if you want to take to a different page, you can do the next type of button that I'm going to demonstrate

51
00:04:03,110 --> 00:04:09,200
is a split button, very similar per break rule.

52
00:04:09,210 --> 00:04:11,630
Otherwise they'll be just touching on one.

53
00:04:11,630 --> 00:04:13,430
I don't like them touching like that.

54
00:04:13,430 --> 00:04:17,870
And two is just easy to see that they are two different items.

55
00:04:18,410 --> 00:04:23,360
So for the split button, you also want a button dash group.

56
00:04:23,600 --> 00:04:29,210
And the only real thing that we're going to be changing is we're going to have.

57
00:04:30,700 --> 00:04:44,620
A second, but I'm also going to have two buttons and this is going to be tight button and I have a

58
00:04:44,620 --> 00:04:48,360
class of beating to beat.

59
00:04:48,370 --> 00:04:59,650
And Jane, danger is good if you keep things consistent and between in danger and the main button.

60
00:05:01,690 --> 00:05:03,720
And we'll see what this is in a second.

61
00:05:03,730 --> 00:05:07,990
And here, make sure we're all the correct classes.

62
00:05:08,790 --> 00:05:19,490
I need one more to lock down that toggle dash split so everything else is fine.

63
00:05:20,110 --> 00:05:23,100
You don't think that click me texted.

64
00:05:23,100 --> 00:05:27,690
Basically what this is now and what we will put is full screen.

65
00:05:27,700 --> 00:05:31,210
We will respond to the class of Ethar.

66
00:05:31,690 --> 00:05:39,340
The screen readers only toggle that if we refresh, we get this.

67
00:05:39,370 --> 00:05:41,020
You may look basically the same.

68
00:05:41,230 --> 00:05:43,240
What happens when we click our original button?

69
00:05:43,630 --> 00:05:47,620
Watch the network here, but now watch what button.

70
00:05:47,620 --> 00:05:50,170
I can see it highlighted separately.

71
00:05:52,090 --> 00:05:57,490
And if I click the dropdown in the Arrow, the dropdown comes and it's essentially attached to that,

72
00:05:57,670 --> 00:06:00,910
whereas this this doesn't initiate the dropdown.

73
00:06:01,100 --> 00:06:04,770
So you can make that potentially for a ref in here.

74
00:06:05,020 --> 00:06:06,850
You can make that go to a different page.

75
00:06:07,030 --> 00:06:09,360
And maybe this opens up this menu.

76
00:06:09,370 --> 00:06:13,630
And from here you can go to different pages or select different items.

77
00:06:14,500 --> 00:06:18,710
OK, so the next thing I'm going to cover is sizing.

78
00:06:19,110 --> 00:06:20,590
So sizing, sizing.

79
00:06:20,660 --> 00:06:27,010
So are you the original one for the three different sizes that you can implement?

80
00:06:29,300 --> 00:06:35,890
Let me break through that.

81
00:06:40,090 --> 00:06:42,240
We're all waiting to.

82
00:06:44,920 --> 00:06:50,140
So for the Theissen, where we've got the button, I can put this in the split button as well, you

83
00:06:50,140 --> 00:06:52,690
just put BTN algae for large.

84
00:06:55,370 --> 00:07:04,770
And for medium BTN Dush Smith, Moore for refresh, this is what we get needed, just an extra break

85
00:07:04,780 --> 00:07:06,970
rule after the group.

86
00:07:10,060 --> 00:07:11,060
OK, there we go.

87
00:07:11,290 --> 00:07:13,700
So the lodge is obviously bigger.

88
00:07:13,870 --> 00:07:20,380
Medium is essentially the default one and the small is a little smaller, but the functionality is exactly

89
00:07:20,680 --> 00:07:22,530
the same to us.

90
00:07:22,700 --> 00:07:26,930
So using the next thing we're going to cover is Arrow Direction.

91
00:07:27,400 --> 00:07:32,500
So again, I'm going to grab hold of the original one.

92
00:07:32,680 --> 00:07:41,680
You can apply the features to any dropdown that you want and you'll see that they're not just called

93
00:07:41,680 --> 00:07:42,370
dropdown.

94
00:07:42,400 --> 00:07:50,480
So if I want to save that refresh, want this arrow here instead of it pointing down only two point,

95
00:07:50,500 --> 00:08:01,360
maybe right or left or up or down, you just put it a drop down and drop left or block it or drop and

96
00:08:01,660 --> 00:08:05,230
is pointing right now and as you see it open.

97
00:08:05,240 --> 00:08:05,630
Right.

98
00:08:05,830 --> 00:08:11,020
So that's the arrow direction and the one last set of.

99
00:08:12,140 --> 00:08:20,000
Feature that I'm going to show you is and I'll change this on back to dropdown is active and disabled

100
00:08:20,000 --> 00:08:20,450
state.

101
00:08:20,450 --> 00:08:24,650
So for refresh, we get the bottom part.

102
00:08:24,710 --> 00:08:25,190
Click on it.

103
00:08:25,580 --> 00:08:25,810
Right.

104
00:08:26,300 --> 00:08:29,450
I'm clicking this button by this item in the dropped.

105
00:08:29,450 --> 00:08:35,690
And although I haven't let go the active, now, if you want one of them to constantly be active, all

106
00:08:35,690 --> 00:08:43,790
you do is you put active like so, and you can also make one of them or all of them or many of you want

107
00:08:43,790 --> 00:08:47,780
you can as many as you want active and as many as you want disabled.

108
00:08:48,320 --> 00:08:55,140
So if I was to reload this little hash there, I click that if I was to click item three hash to them.

109
00:08:55,170 --> 00:09:02,960
And so the actual functionality of that link is of the and nothing's happening where the click one of

110
00:09:02,960 --> 00:09:04,250
the others the hash appears.

111
00:09:04,490 --> 00:09:09,590
That's basically what the H ref he's navigating to for.

112
00:09:09,620 --> 00:09:15,440
That is the highlighted the active once a few select examples you can make it active.

113
00:09:15,480 --> 00:09:17,750
So that's really all there is to know.

114
00:09:18,020 --> 00:09:27,190
There's a few other like features such as, do you know, menu alignment, which is pretty cool.

115
00:09:27,410 --> 00:09:33,010
There's a few more menu regarding the menu content divided as well.

116
00:09:33,020 --> 00:09:33,540
It's Portlock.

117
00:09:33,570 --> 00:09:36,320
Divide the class in a list item there.

118
00:09:36,590 --> 00:09:44,930
The you can put it in forms and you can also detect when it's been triggered, when it's being clicked

119
00:09:45,230 --> 00:09:50,230
via JavaScript, which is covered right here, and all the different methods are here.

120
00:09:50,420 --> 00:09:53,990
So feel free to have a look at the dropdown for sure.

121
00:09:53,990 --> 00:09:54,950
API Guide.

122
00:09:54,950 --> 00:09:56,960
I will provide a link to this in the description.

123
00:09:57,170 --> 00:10:01,820
And as usual, if you have any questions, feel free to pour me a message and I'll look forward to seeing

124
00:10:01,820 --> 00:10:03,260
you in the next video.