Materialize Dropdown : Materialize provides dropdown which can be embed with the buttons. Here in this tutorial we are going to explain how you can create dropdown buttons in Materialize framework. You can also use our online editor to edit and run the code online.
Materialize Dropdown Example
Let us create very basic dropdown in materialize- create a button and add class dropdown-button to it. Add data-activates it might be id of the ul tag. Here is the complete example-
Materialize Dropdown Example:
<a class="dropdown-button btn" href="#" data-activates="myDrodown">Dropdown Menu</a> |
If you run the above example it will produce the output something like this-
Options:
- induration : The duration of the transition enter in milliseconds. Default time for this is 300ms
- outduration : This is used to transition out in millisecond, Default time for this is 225ms.
- constrainwidth : If true, constrainWidth to the size of the dropdown activator. Default is set true.
- hover : This is used to open dropdown on hover by default it is false, if you want to open on hover set it true.
- gutter : This defines the spacing from the aligned edge. Default value is 0.
- beloworigin : This is used to set whether the dropdown will open below the activator, if you want to open dropdown below the activator set it true. Default is set false.
- alignment : Defines the edge the menu is aligned to. Default is set ‘left’
- stoppropagation : If true, stops the event propagating from the dropdown origin click handler. Default is set false
Example
You can use the above options simply as below-
Materialize Dropdown jQuery Options Example
|
|