keyboard_arrow_down Dropdown

Introduction

Make sure that the data-activates attribute matches the id in the <ul> tag.

You can add a divider with the <li class="divider"></li> tag.

Drop Me!

• one
• two
• three

                                
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='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>
</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
beloworigin	If true, the dropdown will show below the activator. Default: false
alignment	Defines the edge the menu is aligned to. Default: 'left'

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-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
                                
                            

jQuery Plugin Initialization

Initialization for dropdowns is only necessary if you create them dynamically.

                                
$('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false, // Does not change width of dropdown to that of the activator
    hover: true, // Activate on 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
});