Drop downs are contextual menus that provide multiple choices on a temporary surface.
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
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:
A very common usage of dropdown menu is in navigation menus. Let's take a look at an example (Click on Prototypes):