Simple, mobile-friendly dropdown menus.
Clone or download
Pull request Compare This branch is even with cferdinandi:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs
kraken-grid
src
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE.md
README.md
gulpfile.js
package.json

README.md

Drop Build Status

Simple, mobile-friendly dropdown menus.

Download Drop / View the demo


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

  1. In bash/terminal/command line, cd into your project directory.
  2. Run npm install to install required files.
  3. When it's done installing, run one of the task runners to get going:
    • gulp manually compiles files.
    • gulp watch automatically 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.