Simple Inline Dropdown List Plugin with jQuery
File Size: | 2.07 KB |
---|---|
Views Total: | 1784 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A small jQuery plugin which allows you to append a pretty inline dropdown list to any Html elements. Standalone dropdown is supported as well.
How to use it:
1. Create an inline dropdown using Html list.
<p>Web <ul class="dropdown"> <li>Design <ul class="menu"> <li>Jquery</li> <li>Javascript</li> <li>Html5</li> <li>CSS3</li> </ul> </li> </ul> resources.</p>
2. The CSS to style the dropdown list.
ul, li { list-style: none; } .dropdown { margin: 0; padding: 0; display: inline; position: relative; } .dropdown > li { background: #fff; padding: 0; border-radius: 2px; display: inline-block; position: relative; cursor: pointer; font-weight: 700; } .dropdown > li:after { content: '\25BC'; font-size: .75em; margin-left: -3px; } .dropdown > li ul { background: inherit; border: 1px solid #aaa; margin: 0; border-radius: 4px; position: absolute; top: 30px; left: 0; min-width: 100px; padding: 5px; border-radius: 3px; -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25); } .dropdown > li ul li { background: inherit; padding: 6px 12px; border-top: 1px solid #ccc; color: #333; white-space: nowrap; font-weight: 400; } .dropdown > li ul li:first-child { border-top: none; } .dropdown ul { display: none; } .show-child ul { display: block; z-index: 9; }
3. Include the jQuery library at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
4. A little Javascript to enable the dropdown list.
(function (jQuery) { jQuery.mark = { dropdown: function (options) { var defaults = { selector: '.dropdown > li' }; if (typeof options == 'string') defaults.selector = options; var options = jQuery.extend(defaults, options); return jQuery(options.selector).each(function () { var dropobj = jQuery(this); var thelot = jQuery('.dropdown > li'); dropobj.click(function(event) { thelot.not(dropobj).removeClass('show-child'); dropobj.toggleClass("show-child"); }); }) } } })(jQuery); jQuery(function(){ jQuery.mark.dropdown(); });
This awesome jQuery plugin is developed by xmark. For more Advanced Usages, please check the demo page or visit the official website.