Easy Dropdown Menu Generator With jQuery addDropMenu - Download Easy Dropdown Menu Generator With jQuery - addDropMenu

Download Easy Dropdown Menu Generator With jQuery – addDropMenu

Posted on

This time I will share jQuery Plugin and tutorial about Easy Dropdown Menu Generator With jQuery – addDropMenu, hope it will help you in programming stack.

Easy Dropdown Menu Generator With jQuery addDropMenu - Download Easy Dropdown Menu Generator With jQuery - addDropMenu
File Size: 23.9 KB
Views Total: 2935
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
2 <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.

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

3. Customize the label text for the dropdown menu.

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

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

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

5. Set the width of the dropdown menu:

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

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

1 <div data-addui='dropMenu'
2      data-pin='top-right'>
3   <a href='#'>Link 1</a>
4   <a href='#'>Link 2</a>
5   <a href='#'>Link 3</a>
6 </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.

source : jqueryscript.net