A drop down menu allows users to select for multiple options in a dropdown list.
This HDMI outage shows an example of a drop down menu when we click the menu button.
The list appears with four options to click on when we click our mouse off the dropdown list.
The list disappears.
To create a drop down menu we start with a div element and assign a class attribute set to drop down.
Next we create our button inside the div the button element has a class attribute with three classes
Button Button primary and dropdown toggle.
We also need to create a data toggle attribute and set it to dropdown the scene here.
This attribute is required in order for the menu to work.
Next we have our label.
In this case we've got we've attached a label menu to this button this band element contains a class
set to carat.
This creates the small arrow icon next to the menu label
the drop down menu list items must be contained in an unordered list element with the class set to drop
down menu next redefined define the list items one at a time.
So here we have four list items each has a link attribute and a label.
Option 1 option 2 3 and 4 we can create a dropdown divider by adding a list item with the class divider
so we'll go ahead and add a divider here.
I've seen the page and when I refresh you can see that we have a faint divider after option for so after
the divider you can continue adding additional list items so we'll add Option 5 and 6 save the file
and we can see that option 5 and 6 are now divided from options 1 through 4 we can add dropdown headers
by creating a list item
and creating a class set to dropdown header.
So just go ahead and create a header
and you can give your header any name you like we'll call it header 1 save the file refresh the page
and there's our header we'll create another header after divider call it header to
a list item can be disabled by applying a class set to disabled on the list item.
So if we wanted disable Option 1 and 2 you simply give it a class of disable
then we can no longer click on option 1 or 2 we can write a line the drop down menu using the drop down
menu.
Right.
Class in this class must be added to the UL to the UL element
and after refreshing the page we can see that the menu now appears on the right side.
Remove that for no
and we can also change the orientation of the dropdown to drop up.
This will cause the menu to expand in an upward direction rather than downward and to do so we simply
change the div class here from dropdown to drop up.
Now there likely won't be enough space for it to be visible sight.
I'd have to make we have to create some breaks
and we can see that the menu no comes upward rather than downward.