Simple, mobile-friendly dropdown menus.
"The Vanilla JS Guidebook" and level-up as a web developer. 🚀Want to learn how to write your own vanilla JS plugins? Check out
Compiled and production-ready code can be found in the
dist directory. The
src directory contains development code.
1. Include Drop on your site.
2. Add the markup to your HTML.
[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.
...Dropdown 1Item 1Item 2Item 3Dropdown 2Item 1Item 2Item 3...
3. Initialize Drop.
In the footer of your page, after the content, initialize Drop. And that's it, you're done. Nice work!
Installing with Package Managers
You can install Drop with your favorite package manager.
npm install cferdinandi/drop
bower install https://github.com/cferdinandi/drop.git
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.
Make sure these are installed first.
- In bash/terminal/command line,
cdinto your project directory.
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.
You can pass options and callbacks into Drop through the
Use Drop events in your own scripts
You can also call Drop's toggle dropdown event in your own scripts.
Open a dropdown menu.
var toggle = document;drop;
Close all open dropdown menus.
Destroy the current
drop.init(). This is called automatically during the init function to remove any existing initializations.
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.
How to Contribute
Please review the contributing guidelines.
The code is available under the MIT License.