jQuery Plugin for Single-level Dropdown Menu

Dropit is a jQuery plugin for creating a simple clean dropdown toggle appending any HTML elements. Useful for creating action lists for web/mobile applications.

jquery dropdown menu onclick, jquery dropdown menu on hover, jquery onclick dropdown menu example, jquery dropdown select, responsive dropdown menu jquery

How to make use of it:

1. Include dropit.css inside your header section and dropit.js.

<link href="dropit.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="dropit.js"></script>

2. Create a dropdown list with a toggle button using Nested Html Lists.

<ul id="demo" class="menu">
<li><a href="#" class="btn">Click Me</a>
<ul>
<li><a href="#">Some Action 1</a></li>
<li><a href="#">Some Action 2</a></li>
<li><a href="#">Some Action 3</a></li>
...
</ul>
</li>
</ul>

3. Call the plugin on the ul element.

$(document).ready(function() {
$('#demo').dropit();
});

4. Available Options and callbacks.

$(document).ready(function() {
$('#demo').dropit({
action: 'click', // The open action for the trigger
submenuEl: 'ul', // The submenu element
triggerEl: 'a', // The trigger element
triggerParentEl: 'li', // The trigger parent element
afterLoad: function(){}, // Triggers when plugin has loaded
beforeShow: function(){}, // Triggers before submenu is shown
afterShow: function(){}, // Triggers after submenu is shown
beforeHide: function(){}, // Triggers before submenu is hidden
afterHide: function(){} // Triggers before submenu is hidden
});
});

5. Sample CSS design dropdown menu.

.menu ul {
display: none;
} /* Hide before plugin loads */
.menu ul.dropit-submenu {
background-color: #fff;
border: 1px solid #b2b2b2;
padding: 6px 0;
margin: 3px 0 0 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
}
.menu ul.dropit-submenu a {
display: block;
font-size: 14px;
line-height: 25px;
color: #7a868e;
padding: 0 18px;
}
.menu ul.dropit-submenu a:hover {
background: #248fc1;
color: #fff;
text-decoration: none;
}

Simple Flexible jQuery Dropdown Menu, Dropit Plugin/Github