Simple jQuery UI Drop Down Menu Plugin - jui_dropdown

File Size: 42.9KB
Views Total: 7186
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

1. Add path to jQuery library, jQuery UI and jui_dropdown

<script src=""></script>
<script src=""></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=""/>

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>

<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>


5. CSS for this example

#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;

6. The javascript

$(function() {
    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: ' + + ')');

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