Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Drop 
Simple, mobile-friendly dropdown menus.
Want to learn how to write your own vanilla JS plugins? Check out "The Vanilla JS Guidebook" and level-up as a web developer. 🚀
Getting Started
Compiled and production-ready code can be found in the dist directory. The src directory contains development code.
1. Include Drop on your site.
<link rel="stylesheet" href="dist/css/drop.css">
<script src="dist/js/drop.js"></script>
2. Add the markup to your HTML.
Add a [data-dropdown] attribute to the dropdown element. You can pass in different selectors in the configuration settings. If a dropdown menu is close to the right edge, add the .dropdown-right class to avoid text clipping.
...
<li class="dropdown" data-dropdown>
<a href="FALLBACK-URL.com">
Dropdown 1
</a>
<div class="dropdown-menu" data-dropdown-menu>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</li>
<li class="dropdown" data-dropdown>
<a href="FALLBACK-URL.com">
Dropdown 2
</a>
<div class="dropdown-menu dropdown-right" data-dropdown-menu>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</li>
...
3. Initialize Drop.
In the footer of your page, after the content, initialize Drop. And that's it, you're done. Nice work!
<script>
drop.init();
</script>
Installing with Package Managers
You can install Drop with your favorite package manager.
- NPM:
npm install cferdinandi/drop - Bower:
bower install https://github.com/cferdinandi/drop.git - Component:
component install cferdinandi/drop
Changing the show more/show less icons
The +/- icons after the dropdown link are controlled using a:after selectors in the CSS/Sass files. Update as desired.
Working with the Source Files
If you would prefer, you can work with the development code in the src directory using the included Gulp build system. This compiles, lints, and minifies code.
Dependencies
Make sure these are installed first.
Quick Start
- In bash/terminal/command line,
cdinto your project directory. - Run
npm installto install required files. - When it's done installing, run one of the task runners to get going:
gulpmanually compiles files.gulp watchautomatically compiles files and applies changes using LiveReload.
Options and Settings
Drop includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
Global Settings
You can pass options and callbacks into Drop through the init() function:
drop.init({
selector: '[data-dropdown]', // Selector for the dropdown (must be a valid CSS selector)
activeClass: 'active', // Class added to active dropdown toggles
initClass: 'js-drop', // Class added to `<html>` element when initiated
callback: function ( toggle ) {} // Function that's run after a dropdown is toggled
});
Use Drop events in your own scripts
You can also call Drop's toggle dropdown event in your own scripts.
openDrop()
Open a dropdown menu.
drop.openDrop(
toggle, // Link node that toggles the dropdown action. ex. document.querySelector('#toggle')
options, // Classes and callbacks. Same options as those passed into the init() function
);
Example
var toggle = document.querySelector('#toggle');
drop.openDrop( toggle );
closeDrops()
Close all open dropdown menus.
drop.closeDrops(
options, // Classes and callbacks. Same options as those passed into the init() function
);
Example
drop.closeDrops();
destroy()
Destroy the current drop.init(). This is called automatically during the init function to remove any existing initializations.
drop.destroy();
Browser Compatibility
Drop works in all modern browsers, and IE 10 and above. You can push browser support back to IE 9 with the classList.js polyfill.
Drop is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, users still have full access to the dropdown menus but lose the "stays open after hover" functionality.
How to Contribute
Please review the contributing guidelines.
License
The code is available under the MIT License.
FAQs
Simple, mobile-friendly dropdown menus
The npm package dropjs receives a total of 0 weekly downloads. As such, dropjs popularity was classified as not popular.
We found that dropjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 18 May 2017
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
By Sarah Gooding - Feb 04, 2025
Research
Security News
Go Supply Chain Attack: Malicious Package Exploits Go Module Proxy Caching for Persistence
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
By Kirill Boychenko - Feb 04, 2025