Dropdown
Drop downs are contextual menus that provide multiple choices on a temporary surface.
Usage
In order to use dropdowns you need to have an element that triggers showing/hiding of the dropdown menu. It can be a button
or an
a
or any element and you need to add
.drop-toggle
class to it. Then right after your trigger element you need to add the following markup.
<ul class="cdt-drop-menu rounded">
<li class='cdt-menu-item'>
Item 1
</li>
<li class='cdt-menu-item'>
Item 2
</li>
</ul>
Note that the dropdown is an unordered list ul
with the class
.cdt-drop-menu
You can add 2 classes to make it visually different; rounded
to make the corners of the menu round and also border
to add border lines between the items in the menu.
Note: Dropdown menus can use the same layout as Kodhus lists as well if you need to add Avatar and extra items. Take a look at examples section to see how it's done.
Take a look at the following example:
Examples
A very common usage of dropdown menu is in navigation menus. Let's take a look at an example (Click on Prototypes):