Dropdown
Add a dropdown list to any button. Make sure that the data-targetattribute matches the id in the <ul>tag. You can add a divider with the <liclass="divider"></li>tag. You can also add icons. Just add the icon inside the anchortag.
<!-- Dropdown Trigger --><a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a><!-- Dropdown Structure --><ul id='dropdown1' class='dropdown-content'><li><a href="#!">one</a></li><li><a href="#!">two</a></li><li class="divider"></li><li><a href="#!">three</a></li><li><a href="#!"><i class="material-icons">view_module</i>four</a></li><li><a href="#!"><i class="material-icons">cloud</i>five</a></li></ul>Options
| Option Name | Description |
|---|---|
| inDuration | The duration of the transition enter in milliseconds. Default:300 |
| outDuration | The duration of the transition out in milliseconds. Default:225 |
| constrainWidth | If true,constrainWidth to the size of the dropdown activator. Default:true |
| hover | If true,the dropdown will open on hover. Default:false |
| gutter | This defines the spacing from the aligned edge. Default:0 |
| coverTrigger | If true,the dropdown will show below the activator. Default:false |
| alignment | Defines the edge the menu is aligned to. Default:'left' |
| stopPropagation | If true,stops the event propagating from the dropdown origin click handler. Default:false |
To use these inline you have to add them as data attributes. If you want more dynamic control,you can define them using the jQuery plugin below.
<a class='dropdown-trigger btn' data-coverTrigger="true" href='#' data-target='dropdown1'>Drop Me!</a>jQuery Plugin Initialization
Initialization for dropdowns is only necessary if you create them dynamically.
$('.dropdown-trigger').dropdown({inDuration:300,outDuration:225,constrainWidth:false,// Does not change width of dropdown to that of the activator hover:true,// Activate on hover gutter:0,// Spacing from edge coverTrigger:false,// Displays dropdown below the button alignment:'left',// Displays dropdown with edge aligned to the left of button stopPropagation:false // Stops event propagation});You can also open dropdowns programatically,the below code will make your modal open on document ready:
$('.dropdown-trigger').dropdown('open');You can also close dropdowns programatically:
$('.dropdown-trigger').dropdown('close');