Simple jQuery UI Drop Down Menu Plugin - jui_dropdown

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.