Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cferdinandi/drop
A small CSS component that turns browser-native <details> elements into dropdown menus.
https://github.com/cferdinandi/drop
css details dropdowns html html-css no-dependencies
Last synced: 18 days ago
JSON representation
A small CSS component that turns browser-native <details> elements into dropdown menus.
- Host: GitHub
- URL: https://github.com/cferdinandi/drop
- Owner: cferdinandi
- License: mit
- Created: 2013-02-06T19:47:21.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2019-03-07T20:28:45.000Z (over 5 years ago)
- Last Synced: 2024-04-14T12:08:22.187Z (7 months ago)
- Topics: css, details, dropdowns, html, html-css, no-dependencies
- Language: JavaScript
- Homepage:
- Size: 410 KB
- Stars: 77
- Watchers: 6
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/contributing.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Drop [](https://travis-ci.org/cferdinandi/drop)
A small CSS component that turns browser-native `` elements into dropdown menus.
**[View the demo on CodePen →](https://codepen.io/cferdinandi/pen/oVbKaK)**
[Getting Started](#getting-started) | [Dropdown Groups](#dropdown-groups) | [Customizing](#customizing) | [What's new?](#whats-new) | [Browser Compatibility](#browser-compatibility) | [License](#license)
### Interested in doing more with browser-native methods and APIs? Check out my [Vanilla JS Pocket Guides](https://vanillajsguides.com/) or join the [Vanilla JS Academy](https://vanillajsacademy.com) 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.
In addition to a small CSS file, you should include [a `` element polyfill](https://github.com/javan/details-element-polyfill) to add support to IE and Edge.
**Direct Download**
You can [download the files directly from GitHub](https://github.com/cferdinandi/drop/archive/master.zip).
```html
```
**CDN**
You can also use the [jsDelivr CDN](https://cdn.jsdelivr.net/gh/cferdinandi/drop/dist/). I recommend linking to a specific version number or version range to prevent major updates from breaking your site. Smooth Scroll uses semantic versioning.
```html
```
[And here's a CDN for the polyfill.](https://cdn.jsdelivr.net/gh/javan/details-element-polyfill/dist/)
**NPM**
You can also use NPM (or your favorite package manager).
```bash
npm install dropjs
```
### 2. Add the markup to your HTML.
Create a standard `` element, and add the `.dropdown` class. It can stand on its own, or be wrapped in a list item (`
The text inside the `` element is what toggles the dropdown. Add an unordered list (`
- `) with your dropdown items.
```html
This has dropdown items
```
If the dropdown is in a navigation and will appear close to the right side of the viewport where it's content might get clipped, add the `dropdown-right` class to shift it's positioning.
```html
This has dropdown items, too
```
And that's it, you're done. Nice work!
**[Explore a demo on CodePen →](https://codepen.io/cferdinandi/pen/oVbKaK)**
## Dropdown Groups
By default, the behavior of one dropdown menu does not affect the other.
If you want all other dropdown menus in a group to close when one is opened, add the included `drop.js` script.
```html
```
Then, instantiate it by passing in the parent element for your dropdown group (or a selector). If you changed the class for your dropdown menus, pass that in as a second argument.
```js
var dropdownGroup = new Drop('#my-nav');
// Using a different class
var otherDropdownGroup = new Drop('#another-nav', '.dropdown-alt');
```
**[Explore dropdown groups on CodePen →](https://codepen.io/cferdinandi/pen/pYNbOY)**
### Canceling a dropdown group
You can cancel this functionality with the `destroy()` method.
```js
dropdownGroup.destroy();
```
## Customizing
Drop includes very minimal styling. You're encouraged to add your own styles to match your theme and layout, including changing the color of the text and dropdown menu links.
## What's new?
Drop 12 completely ditches the old JavaScript plugin and markup in favor of the browser-native `` element. You'll need to recreate your markup using the new pattern.
## Browser Compatibility
Drop has the same support as the `` element. That means that it works in all modern browsers, but not IE or Edge. In unsupported, the content will always be expanded.
### Polyfill
You can add Edge and IE support with the lightweight [`` element polyfill](https://github.com/javan/details-element-polyfill). Once Edge migrates to Blink, it will support the element natively.
## License
The code is available under the [MIT License](LICENSE.md).