Sweet and versatile.
View on GitHub

Create dropdowns in any direction with any kind of content.

A trigger for a SweetDropdown can be really .

Standard

Dropdown:

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor" id="dropdown-standard">
	<ul>
		<li><a href="#">Item 1</a>></li>
		<li><a href="#">Item 2</a></li>
		<li class="divider"></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

Trigger:

<button data-dropdown="#dropdown-standard">Try out!</button>

With Icons

Dropdown:

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor" id="dropdown-with-icons">
	<ul>
		<li><a href="#"><svg>...</svg> Item 1</a>></li>
		<li><a href="#"><svg>...</svg> Item 2</a></li>
		<li class="divider"></li>
		<li><a href="#"><svg>...</svg> Item 3</a></li>
	</ul>
</div>

Trigger:

<button data-dropdown="#dropdown-with-icons">Try out!</button>

Dark with Icons

Dropdown:

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor dark" id="dropdown-dark-with-icons">
	<ul>
		<li><a href="#"><svg>...</svg> Item 1</a>></li>
		<li><a href="#"><svg>...</svg> Item 2</a></li>
		<li class="divider"></li>
		<li><a href="#"><svg>...</svg> Item 3</a></li>
	</ul>
</div>

Trigger:

<button data-dropdown="#dropdown-dark-with-icons">Try out!</button>

Different Position

Dropdown:

<div class="dropdown-menu dropdown-anchor-left-center dropdown-has-anchor" id="dropdown-standard">
	<ul>
		<li><a href="#">Item 1</a>></li>
		<li><a href="#">Item 2</a></li>
		<li class="divider"></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

Trigger:

<button data-dropdown="#dropdown-left-center">Try out!</button>

No anchor + HTML-Content

Dropdown:

<div class="dropdown-menu dropdown-anchor-top-left" id="dropdown-no-anchor-html">
	<p>I am <b>HTML</b>-<i>Content</i>.</p>

	<button>And a button!</button>
</div>

Trigger:

<button data-dropdown="#dropdown-no-anchor-html">Try out!</button>

Note: For dropdowns without anchor you still specify where the anchor would be normally but leave out dropdown-has-anchor.

Installation

Note: You need to have jQuery installed to use SweetDropdown.

Package Managers

$ bower install sweet-dropdown
$ npm install sweet-dropdown


Manual

  1. Download 
  2. <link rel="stylesheet" href="sweet-dropdown/dist/min/jquery.sweet-dropdown.min.css" />
    <script src="sweet-dropdown/dist/min/jquery.sweet-dropdown.min.js"></script>

Modifiers

This is an overview of all the available modifier classes and attributes, sorted by whether the class has to be applied to the dropdown itself or the trigger.

Dropdown

Name Type Description
dropdown-has-anchor Class If specified, dropdown has an anchor.
dropdown-anchor-{SIDE}-{POSITION} Class

{SIDE} is the side of the dropdown the anchor should appear on. So if you specifiy left, the dropdown opens to the right.
Must be one of:
- top (default)
- right
- bottom
- left

{POSITION} is the position of the anchor on the specified side. Must be one of:
- left
- center
- right

dropdown-disabled Class If specified, dropdown cannot be opened.
data-add-x Atribute Move the dropdown by given amount of pixels to the right. Use negative values for moving to the left.
data-add-y Atribute Move the dropdown by given amount of pixels to the bottom. Use negative values for moving to the top.

Trigger

Name Type Description
dropdown-open Class Indicates whether the dropdown for this trigger is open.
This gets added automatically when a dropdown is opened so you can use this for special styles.
dropdown-use-offset Class By default the absolute position inside the document is used to poisition the dropdown. If that fails for you, you can use this class to switch to offset-based positioning instead.
data-dropdown Atribute CSS selector to connect this trigger to a dropdown menu.
You can actually use any jQuery-compatible selector here but it is recommended to stick to IDs.
data-add-anchor-x Atribute Move the anchor by given amount of pixels to the right. Use negative values for moving to the left.
data-add-anchor-y Atribute Move the anchor by given amount of pixels to the bottom. Use negative values for moving to the top.

Methods

Attach all triggers to their dropdowns

$.sweetDropdown.attachAll(); // Automatically called on page load

Hide all dropdowns

$.sweetDropdown.hideAll();

Attach a dropdown to a trigger

$('.trigger').sweetDropdown('attach', '#dropdown-selector');

Detach a dropdown from a trigger

$('.trigger').sweetDropdown('detach');

Show a dropdown

$('.trigger').sweetDropdown('show');

Hide a dropdown

$('.trigger').sweetDropdown('hide');

Enable a dropdown

$('.trigger').sweetDropdown('enable');

Disable a dropdown

$('.trigger').sweetDropdown('disable');

License & Copyright

/*!
 * SweetDropdown: Sweet and versatile dropdowns
 * v<%= pkg.version %>, <%= grunt.template.today("yyyy-mm-dd") %>
 * http://github.com/adeptoas/sweet-dropdown
 *
 * Copyright (c) 2016 Adepto.as AS · Oslo, Norway
 * Dual licensed under the MIT and GPL licenses.
 *
 * See LICENSE-MIT.txt and LICENSE-GPL.txt
 */