Simple jQuery UI Drop Down Menu Plugin - jui_dropdown
File Size: | 42.9KB |
---|---|
Views Total: | 7156 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jui_dropdown is a jQuery and jQuery UI based plugin that helps create a simple drop down menu widget with jQuery UI themes supprot for your website or project.
You might also like:
- Microsoft-Like Responsive Horizontal Drop Down Menu with CSS3 and jQuery
- Animated Drop Down Menu Plugin - apycom
- Pretty jQuery Navigation Menu With Smooth Animation Effect- tmailsilder
- Neat and modern Dropdown Nav Menu with Pure CSS3
- Responsive Multi-Level Navigation Plugin
- Pure CSS3 Drop Down Menu with Icons
- Smooth jQuery Dropdown Navigation Menu With CSS3
- Smooth and Responsive Drop Down Menu With CSS3 and jQuery
- Touch Enabled Multi-level Drop Down Menu Plugin - superfish
- Simple and Clean jQuery Drop Down Menu Plugin - naviDropDown
- Amazon Like Drop Down Menu Plugin with jQuery - Menu Aim
How to use it:
1. Add path to jQuery library, jQuery UI and jui_dropdown
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="jquery.jui_dropdown.js"></script>
2. Choose and include a jQuery UI theme CSS on the web page
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/ui-lightness/jquery-ui.css"/>
3. Include required jui_dropdown CSS on the page
<link href="jquery.jui_dropdown.css" rel="stylesheet" type="text/css">
4. Markup
<div id="demo_drop1"> <div id="launcher1_container"> <button id="launcher1">Select an action</button> </div> <ul id="menu1"> <li id="opt_1.1">...</li> <li id="opt_1.2">...</li> <li id="opt_1.3">...</li> <li id="opt_1.4">...</li> </ul> </div>
5. CSS for this example
<style> #jui_dropdown_demo { height: 400px; } #jui_dropdown_demo button { padding: 3px !important; } #jui_dropdown_demo ul li { background: none; display: inline-block; list-style: none; } #opt_selected { margin-top: 20px; font-size: 20px; } .container1 { margin: 20px 30px 10px 30px ; display: inline-block; } .menu1 { position: absolute; width: 240px !important; margin-top: 3px !important; } </style>
6. The javascript
<script> $(function() { $("#demo_drop1").jui_dropdown({ launcher_id: 'launcher1', launcher_container_id: 'launcher1_container', menu_id: 'menu1', containerClass: 'container1', menuClass: 'menu1', onSelect: function(event, data) { $("#result").text('index: ' + data.index + ' (id: ' + data.id + ')'); } }); }); </script>
This awesome jQuery plugin is developed by pontikis. For more Advanced Usages, please check the demo page or visit the official website.