A small CSS component that turns browser-native
Getting Started | Dropdown Groups | Customizing | What's new? | Browser Compatibility | License
Interested in doing more with browser-native methods and APIs? Check out my Vanilla JS Pocket Guides or join the Vanilla JS Academy 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
Direct Download
You can download the files directly from GitHub.
<script src="path/to/details-element-polyfill.js">script>
CDN
You can also use the jsDelivr CDN. I recommend linking to a specific version number or version range to prevent major updates from breaking your site. Smooth Scroll uses semantic versioning.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/drop/dist/drop.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/drop@12/dist/drop.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/drop@12.0/dist/drop.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/drop@12.0.0/dist/drop.min.css">
And here's a CDN for the polyfill.
NPM
You can also use NPM (or your favorite package manager).
2. Add the markup to your HTML.
Create a standard .dropdown class. It can stand on its own, or be wrapped in a list item () as part of a bigger navigation menu.
The text inside the
<summary>This has dropdown itemssummary>
<ul>
<li><a href="#hi">Hia>li>
<li><a href="#universe">Universea>li>
ul>
details>
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.
<summary>This has dropdown items, toosummary>
<ul>
<li><a href="#hermoine">Hermionea>li>
<li><a href="#harry">Harry Pottera>li>
ul>
details>
And that's it, you're done. Nice work!
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.
<script src="path/to/drop.min.js">script>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/drop@12/dist/js/drop.min.js">script>
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.
// Using a different class
var otherDropdownGroup = new Drop('#another-nav', '.dropdown-alt');
Explore dropdown groups on CodePen -
Canceling a dropdown group
You can cancel this functionality with the destroy() method.
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
Browser Compatibility
Drop has the same support as the
Polyfill
You can add Edge and IE support with the lightweight
License
The code is available under the MIT License.