December 28, 2016

Materialize Dropdown

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>
 
  <ul id='myDrodown' class='dropdown-content'>
    <li><a href="#!">Item 1</a></li>
    <li><a href="#!">Item 2</a></li>
    <li><a href="#!">Item 4</a></li>
    <li><a href="#!">Item 5</a></li>
    <li class="divider"></li>
    <li><a href="#!">Item 5</a></li>
  </ul>

Try it »

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

 
<script>
  $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, 
      hover: true, // Activate when hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left' // Displays dropdown with edge aligned to the left of button
    }
  );
  </script>