Copyright 2011 Cory LaViska for A Beautiful Site, LLC.
Inspired by Bootstrap
Dual licensed under the MIT or GPL Version 2 licenses
http://labs.abeautifulsite.net/jquery-dropdown/
- Include required files:
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />`
<script type="text/javascript" src="jquery.dropdown.js"></script>`
- Create a dropdown and insert it before the closing body tag:
<div id="dropdown-1" class="dropdown-menu has-tip">
<ul>
<li><a href="#1">Item 1</a></li>
<li><a href="#2">Item 2</a></li>
<li><a href="#3">Item 3</a></li>
<li class="divider"></li>
<li><a href="#4">Item 4</a></li>
<li><a href="#5">Item 5</a></li>
<li><a href="#5">Item 6</a></li>
</ul>
</div>
- Add the
data-dropdown
attribute to any HTML element:
<a href="#" data-dropdown="#dropdown-1">dropdown</a>
- There’s no need to initialize it! The plugin will handle everything from here.
The following optional attributes can be added to the trigger element, overriding the plugin's default behavior.
data-dropdown-h-offset
– add/subtract pixels from the default horizontal position of the menu.
data-dropdown-v-offset
– add/subtract pixels from the default vertical position of the menu.
Example usage:
<a href="#" data-dropdown="#dropdown-1" data-dropdown-h-offset="3" data-dropdown-v-offset="-5">dropdown</a>
...to move the menu up 5 and left 3 pixels.
You probably won’t need these, but they’re there just in case.
attach
– attach a dropdown to the selected trigger element(s); pass in the #dropdown-id as value
detach
– detach a dropdown from the selected trigger element(s)
enable
– enables the dropdown and removes the dropdown-disabled class from the trigger
disable
– disables the dropdown and adds the dropdown-disabled class to the trigger
hide
– hide the dropdown
Example usage: $('#trigger').dropdown('method', [value]);