Flexible Popover-like Drop Down Plugin With jQuery - SweetDropdown

SweetDropdown is a jQuery plugin used for creating flexible, animated, popover-style dropdowns which can be attached to any DOM element in any direction.

How to use it:

1. Add jQuery library together with the jQuery SweetDropdown plugin's JS & CSS files into your webpages.

<link href="jquery.sweet-dropdown.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.sweet-dropdown.min.js"></script>

2. Create a basic dropdown menu with a cursor.

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor" id="basic">
  <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>

3. Create a trigger element to toggle the dropdown menu. That's it.

<button data-dropdown="#basic">Basic</button>

4. Create a dark dropdown menu by adding the CSS class 'dark' to the top element.

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor dark" id="basic">

5. Adjust the dropdown poistion.

<div class="dropdown-menu dropdown-anchor-left-center dropdown-has-anchor dark" id="basic">

---

This awesome jQuery plugin is developed by adeptoas. For more Advanced Usages, please check the demo page or visit the official website.