jQuery Plugin for Single-level Dropdown Menu | Dropit

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>
<li><a href="#">Some Action 1</a></li>
<li><a href="#">Some Action 2</a></li>
<li><a href="#">Some Action 3</a></li>

3. Call the plugin on the ul element.

$(document).ready(function() {

4. Available Options and callbacks.

$(document).ready(function() {
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

See Demo And Download

Official Website(gilbitron): Click Here

This superior jQuery/javascript plugin is developed by gilbitron. For extra advanced usage, please go to the official website.

Related Posts


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Product Thumbnail Slider With Positive Zoom Effect jQuery

Positive Zoom is a JavaScript library for creating an image gallery where you can zoom in on the current image by hovering over it. Must Read: Pure…


Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and…


Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window. A responsive, customizable, and…


Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a…


Neumorphic Design Inspiration Style CSS Shapes | Neumorphism

Multi-dimensional design is inspired by the physical world and adds textures, reflection, shadows, layers, and depths to the flat design making the UI elements more visible. CSS…