Easy Dropdown Menu Generator With jQuery - addDropMenu

addDropMenu is a dead simple jQuery plugin that automatically generate a dropdown menu from any DIV element containing a group of anchor links. All the options can be passed via data attributes directly on the DIV element.

How to use it:

1. Include both jQuery library and the jQuery addDropMenu plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="dist/addDropMenu.js"></script>

2. Just add the 'data-addui' attribute to the DIV container and the plugin will take care of the rest.

<div data-addui='dropMenu'>
  <a href='#'>Link 1</a>
  <a href='#'>Link 2</a>
  <a href='#'>Link 3</a>
</div>

3. Customize the label text for the dropdown menu.

<div data-addui='dropMenu' 
     data-label='Drop Down Menu'>
  <a href='#'>Link 1</a>
  <a href='#'>Link 2</a>
  <a href='#'>Link 3</a>
</div>

4. Make the dropdown menu appear under the toggle button:

<div data-addui='dropMenu' 
     data-cover='false'>
  <a href='#'>Link 1</a>
  <a href='#'>Link 2</a>
  <a href='#'>Link 3</a>
</div>

5. Set the width of the dropdown menu:

<div data-addui='dropMenu' 
     data-width='250'>
  <a href='#'>Link 1</a>
  <a href='#'>Link 2</a>
  <a href='#'>Link 3</a>
</div>

6. Set the position of your dropdown menu relative to the toggle button.

<div data-addui='dropMenu' 
     data-pin='top-right'>
  <a href='#'>Link 1</a>
  <a href='#'>Link 2</a>
  <a href='#'>Link 3</a>
</div>

Change log:

2016-11-12

• v1.0.2

---

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