Dropdown

A universal dropdown plugin that will attach dropdowns or popovers next to anything!

Link Dropdown  Content Dropdown

Title

Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

More text.

Button

Basic

You can create a dropdown using minimal markup.

Has Dropdown  |  Has Content Dropdown

Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

<a href="#" data-dropdown="drop3">Has Dropdown</a>
<ul id="drop3" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
<a href="#" data-dropdown="drop4">Has Content Dropdown</a>
<div id="drop4" class="f-dropdown content" data-dropdown-content>
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>

Advanced

Additional classes can be added to your dropdown to change its appearance.

Tiny Dropdown 
<a href="#" class="button cta small" data-dropdown="drop-tiny">tiny Dropdown <span class="icon-down-dir"></span></a>
<ul id="drop-tiny" class="tiny f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
Small Dropdown 
<a href="#" class="button cta small" data-dropdown="drop-small">small Dropdown <span class="icon-down-dir"></span></a>
<ul id="drop-small" class="small f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
Medium Dropdown 
<a href="#" class="button cta small" data-dropdown="drop-medium">medium Dropdown <span class="icon-down-dir"></span></a>
<ul id="drop-medium" class="medium f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
Large Dropdown 
<a href="#" class="button cta small" data-dropdown="drop-large">large Dropdown <span class="icon-down-dir"></span></a>
<ul id="drop-large" class="large f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

Available class options:

  • tiny: Make the dropdown have a max-width of 200px
  • small: Make the dropdown have a max-width of 300px
  • medium: Make the dropdown have a max-width of 500px
  • large: Make the dropdown have a max-width of 800px
  • content: Add padding inside the dropdown for better-looking content

Directions

You can now position dropdowns on the top, bottom, left, or right of the target element. The default position is bottom and you do not need to change anything to get your tooltip positioned bottom.

To set other alignments, just specify the align property in data-options on the target element.

Right Dropdown 
<a href="#" class="button small cta reverse" data-dropdown="drop-right" data-options="align:right"><span class="icon-right-dir"></span> Dropdown</a>
<ul id="drop-right" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
Left Dropdown 
<a href="#" class="button small cta reverse" data-dropdown="drop-left" data-options="align:left"><span class="icon-left-dir"></span> Dropdown</a>
<ul id="drop-left" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
Top Dropdown 
<a href="#" class="button small cta reverse" data-dropdown="drop-top" data-options="align:top"><span class="icon-up-dir"></span> Dropdown</a>
<ul id="drop-top" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
Bottom Dropdown 
<a href="#" class="button small cta reverse" data-dropdown="drop-bottom" data-options="align:bottom"><span class="icon-down-dir"></span> Dropdown</a>
<ul id="drop-bottom" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

Hoverable Dropdown Option

If you'd rather have your dropdown be accessible by hover, you can add a data-option to the target element:

Has Hover Dropdown 

<a href="#" data-dropdown="hover1" data-options="is_hover:true">Has Hover Dropdown</a>
<ul id="hover1" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>