Introduction

Add a dropdown list to any button. 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!

  <!-- 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>
        

jQuery Plugin Initialization


  $(document).ready(function(){
    $('.dropdown-button').dropdown();
  });
        

Options

The default behavior of dropdown is to activate on hover. To have it activate on a click, you can pass that as an option.


  $('.dropdown-button').dropdown({
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: false // Activate on click
    }
  );