Hello, in this video, we are going to take a look at dropdown, so I'm sure you know where dropdown
is in the context of Web design, web development.
If you don't, it's basically one of these.
They can get a bit more complex than that just in terms of the way they look into the base code and
now will be coming some extra features as well by the world.
Do you provide a link to this bootstrap Web site which covers all the different features that you can
implement into your dropdown?
And I'm going to cover a few of them.
But, you know, if I cover all of them, it'll be a really long video.
And, you know, once you get the basics down, you can easily have a look and get what you need.
And a lot of this is based on Plus's.
OK, so to implement a basic one is pretty simple.
You need a DB and this will have a class of brokedown.
Well done.
And in here we need a button for questionmark.
Well, I accidentally pressed it and this requires a few classes, forced it, but then we all have
a class for the style of it.
And this essentially is this primary secondary success in warning or danger.
And you just put BTM then, you know, these key with and these are the general sort of contextual colors,
styles that you can implement and bootstrap a lower case, by the way.
And I'm going to be using the warning one to drop down the toggle.
And now what type of what data tongo.
And this is going to just totally drop down, which will be implemented to an area that's expanded equals
false.
So by default, it is not expanded and most likely you won't want it to be, but you can make it if
you want to put the text.
OK, May.
And now we implement the dropdown services and unordered list
drop down.
Stay tuned.
And inside here, we're going to have a dress
cake where we're just going to put a hash, which basically doesn't change the, you know, the Web
page, it doesn't take you to another website, turn of a page.
You can make it go to a different website or different page on your website.
That's totally fine.
But for the purpose of this one video, that doesn't really matter.
OK, so we also want a classroom for class
and the class is going to be down item and to close this off.
And in here, you put what the item is going to display in terms of the message, the text.
That's it.
So if you want more, you just duplicated like so change the text here and you can change the link as
well.
If I refresh you save down.
Refresh here.
There we go.
But if you want to move it from the top, you can get the breakthrough margin.
Pardon.
However, you want just toilet to get the down.
And if I want to click one of these, it will do something else at the moment besides a hash here.
But if you want to take to a different page, you can do the next type of button that I'm going to demonstrate
is a split button, very similar per break rule.
Otherwise they'll be just touching on one.
I don't like them touching like that.
And two is just easy to see that they are two different items.
So for the split button, you also want a button dash group.
And the only real thing that we're going to be changing is we're going to have.
A second, but I'm also going to have two buttons and this is going to be tight button and I have a
class of beating to beat.
And Jane, danger is good if you keep things consistent and between in danger and the main button.
And we'll see what this is in a second.
And here, make sure we're all the correct classes.
I need one more to lock down that toggle dash split so everything else is fine.
You don't think that click me texted.
Basically what this is now and what we will put is full screen.
We will respond to the class of Ethar.
The screen readers only toggle that if we refresh, we get this.
You may look basically the same.
What happens when we click our original button?
Watch the network here, but now watch what button.
I can see it highlighted separately.
And if I click the dropdown in the Arrow, the dropdown comes and it's essentially attached to that,
whereas this this doesn't initiate the dropdown.
So you can make that potentially for a ref in here.
You can make that go to a different page.
And maybe this opens up this menu.
And from here you can go to different pages or select different items.
OK, so the next thing I'm going to cover is sizing.
So sizing, sizing.
So are you the original one for the three different sizes that you can implement?
Let me break through that.
We're all waiting to.
So for the Theissen, where we've got the button, I can put this in the split button as well, you
just put BTN algae for large.
And for medium BTN Dush Smith, Moore for refresh, this is what we get needed, just an extra break
rule after the group.
OK, there we go.
So the lodge is obviously bigger.
Medium is essentially the default one and the small is a little smaller, but the functionality is exactly
the same to us.
So using the next thing we're going to cover is Arrow Direction.
So again, I'm going to grab hold of the original one.
You can apply the features to any dropdown that you want and you'll see that they're not just called
dropdown.
So if I want to save that refresh, want this arrow here instead of it pointing down only two point,
maybe right or left or up or down, you just put it a drop down and drop left or block it or drop and
is pointing right now and as you see it open.
Right.
So that's the arrow direction and the one last set of.
Feature that I'm going to show you is and I'll change this on back to dropdown is active and disabled
state.
So for refresh, we get the bottom part.
Click on it.
Right.
I'm clicking this button by this item in the dropped.
And although I haven't let go the active, now, if you want one of them to constantly be active, all
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
you can as many as you want active and as many as you want disabled.
So if I was to reload this little hash there, I click that if I was to click item three hash to them.
And so the actual functionality of that link is of the and nothing's happening where the click one of
the others the hash appears.
That's basically what the H ref he's navigating to for.
That is the highlighted the active once a few select examples you can make it active.
So that's really all there is to know.
There's a few other like features such as, do you know, menu alignment, which is pretty cool.
There's a few more menu regarding the menu content divided as well.
It's Portlock.
Divide the class in a list item there.
The you can put it in forms and you can also detect when it's been triggered, when it's being clicked
via JavaScript, which is covered right here, and all the different methods are here.
So feel free to have a look at the dropdown for sure.
API Guide.
I will provide a link to this in the description.
And as usual, if you have any questions, feel free to pour me a message and I'll look forward to seeing
you in the next video.