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


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

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…