{"id":16427841,"url":"https://github.com/cferdinandi/drop","last_synced_at":"2025-03-16T17:34:47.324Z","repository":{"id":6810688,"uuid":"8058619","full_name":"cferdinandi/drop","owner":"cferdinandi","description":"A small CSS component that turns browser-native \u003cdetails\u003e elements into dropdown menus.","archived":false,"fork":false,"pushed_at":"2019-03-07T20:28:45.000Z","size":420,"stargazers_count":77,"open_issues_count":0,"forks_count":13,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T12:08:22.187Z","etag":null,"topics":["css","details","dropdowns","html","html-css","no-dependencies"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cferdinandi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/contributing.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-02-06T19:47:21.000Z","updated_at":"2024-02-21T10:52:25.000Z","dependencies_parsed_at":"2022-09-15T09:43:52.321Z","dependency_job_id":null,"html_url":"https://github.com/cferdinandi/drop","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fdrop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fdrop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fdrop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fdrop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cferdinandi","download_url":"https://codeload.github.com/cferdinandi/drop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221666411,"owners_count":16860415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","details","dropdowns","html","html-css","no-dependencies"],"created_at":"2024-10-11T08:14:09.689Z","updated_at":"2024-10-27T10:59:29.641Z","avatar_url":"https://github.com/cferdinandi.png","language":"JavaScript","readme":"# Drop [![Build Status](https://travis-ci.org/cferdinandi/drop.svg)](https://travis-ci.org/cferdinandi/drop)\nA small CSS component that turns browser-native `\u003cdetails\u003e` elements into dropdown menus.\n\n**[View the demo on CodePen \u0026rarr;](https://codepen.io/cferdinandi/pen/oVbKaK)**\n\n[Getting Started](#getting-started) | [Dropdown Groups](#dropdown-groups) | [Customizing](#customizing) | [What's new?](#whats-new) | [Browser Compatibility](#browser-compatibility) | [License](#license)\n\n\n\u003chr\u003e\n\n### 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. 🚀\n\n\u003chr\u003e\n\n\n## Getting Started\n\nCompiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.\n\n### 1. Include Drop on your site.\n\nIn addition to a small CSS file, you should include [a `\u003cdetails\u003e` element polyfill](https://github.com/javan/details-element-polyfill) to add support to IE and Edge.\n\n**Direct Download**\n\nYou can [download the files directly from GitHub](https://github.com/cferdinandi/drop/archive/master.zip).\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"path/to/drop.min.css\"\u003e\n\u003cscript src=\"path/to/details-element-polyfill.js\"\u003e\u003c/script\u003e\n```\n\n**CDN**\n\nYou 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.\n\n```html\n\u003c!-- Always get the latest version --\u003e\n\u003c!-- Not recommended for production sites! --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/cferdinandi/drop/dist/drop.min.css\"\u003e\n\n\u003c!-- Get minor updates and patch fixes within a major version --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/cferdinandi/drop@12/dist/drop.min.css\"\u003e\n\n\u003c!-- Get patch fixes within a minor version --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/cferdinandi/drop@12.0/dist/drop.min.css\"\u003e\n\n\u003c!-- Get a specific version --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/cferdinandi/drop@12.0.0/dist/drop.min.css\"\u003e\n```\n\n[And here's a CDN for the polyfill.](https://cdn.jsdelivr.net/gh/javan/details-element-polyfill/dist/)\n\n**NPM**\n\nYou can also use NPM (or your favorite package manager).\n\n```bash\nnpm install dropjs\n```\n\n### 2. Add the markup to your HTML.\n\nCreate a standard `\u003cdetails\u003e` element, and add the `.dropdown` class. It can stand on its own, or be wrapped in a list item (`\u003cli\u003e`) as part of a bigger navigation menu.\n\nThe text inside the `\u003csummary\u003e` element is what toggles the dropdown. Add an unordered list (`\u003cul\u003e`) with your dropdown items.\n\n```html\n\u003cdetails class=\"dropdown\"\u003e\n\t\u003csummary\u003eThis has dropdown items\u003c/summary\u003e\n\t\u003cul\u003e\n\t\t\u003cli\u003e\u003ca href=\"#hi\"\u003eHi\u003c/a\u003e\u003c/li\u003e\n\t\t\u003cli\u003e\u003ca href=\"#universe\"\u003eUniverse\u003c/a\u003e\u003c/li\u003e\n\t\u003c/ul\u003e\n\u003c/details\u003e\n```\n\nIf 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.\n\n```html\n\u003cdetails class=\"dropdown dropdown-right\"\u003e\n\t\u003csummary\u003eThis has dropdown items, too\u003c/summary\u003e\n\t\u003cul\u003e\n\t\t\u003cli\u003e\u003ca href=\"#hermoine\"\u003eHermione\u003c/a\u003e\u003c/li\u003e\n\t\t\u003cli\u003e\u003ca href=\"#harry\"\u003eHarry Potter\u003c/a\u003e\u003c/li\u003e\n\t\u003c/ul\u003e\n\u003c/details\u003e\n```\n\nAnd that's it, you're done. Nice work!\n\n**[Explore a demo on CodePen \u0026rarr;](https://codepen.io/cferdinandi/pen/oVbKaK)**\n\n\n\n## Dropdown Groups\n\nBy default, the behavior of one dropdown menu does not affect the other.\n\nIf you want all other dropdown menus in a group to close when one is opened, add the included `drop.js` script.\n\n```html\n\u003c!-- Direct Download --\u003e\n\u003cscript src=\"path/to/drop.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- CDN --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/cferdinandi/drop@12/dist/js/drop.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, 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.\n\n```js\nvar dropdownGroup = new Drop('#my-nav');\n\n// Using a different class\nvar otherDropdownGroup = new Drop('#another-nav', '.dropdown-alt');\n```\n\n**[Explore dropdown groups on CodePen \u0026rarr;](https://codepen.io/cferdinandi/pen/pYNbOY)**\n\n### Canceling a dropdown group\n\nYou can cancel this functionality with the `destroy()` method.\n\n```js\ndropdownGroup.destroy();\n```\n\n\n\n## Customizing\n\nDrop 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.\n\n\n\n## What's new?\n\nDrop 12 completely ditches the old JavaScript plugin and markup in favor of the browser-native `\u003cdetails\u003e` element. You'll need to recreate your markup using the new pattern.\n\n\n\n## Browser Compatibility\n\nDrop has the same support as the `\u003cdetails\u003e` element. That means that it works in all modern browsers, but not IE or Edge. In unsupported, the content will always be expanded.\n\n### Polyfill\n\nYou can add Edge and IE support with the lightweight [`\u003cdetails\u003e` element polyfill](https://github.com/javan/details-element-polyfill). Once Edge migrates to Blink, it will support the element natively.\n\n\n\n## License\n\nThe code is available under the [MIT License](LICENSE.md).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fdrop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcferdinandi%2Fdrop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fdrop/lists"}