Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Bootstrap-style dropdowns with some added features and no dependencies.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 icons
Octocat-spinner-32 index.html
Octocat-spinner-32 jquery.dropdown.css
Octocat-spinner-32 jquery.dropdown.js
Octocat-spinner-32 readme.md
readme.md

jQuery Bootstrap-style Dropdowns

Copyright 2011 Cory LaViska for A Beautiful Site, LLC.

Inspired by Bootstrap

Dual licensed under the MIT or GPL Version 2 licenses

Demo

http://labs.abeautifulsite.net/jquery-dropdown/

Usage

  • 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.

Special Classes

  • To disable the dropdown, add the dropdown-disabled class to the trigger element
  • To offset positioning, add data-horizontal-offset="10" and/or data-vertical-offset="10" to the trigger element
  • To add a tip to the dropdown, add the has-tip class to the dropdown element
  • To make the dropdown anchor to the right, add the anchor-right class to the dropdown element: Example

Disabling content within a larger trigger

  • Suppose you enable the dropdown on a container (i.e. a table row). To disable the dropdown on items within the row, add the class dropdown-ignore to that element:
<tr data-dropdown="#dropdown-1">
  <td><a class="dropdown-ignore" href="http://example.com">I won't trigger the dropdown</a></td>
  <td>I will trigger the dropdown</td>
</tr>

API

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]);

Something went wrong with that request. Please try again.