npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dropjs

v12.1.0

Published

Simple, mobile-friendly dropdown menus

Downloads

636

Readme

Drop Build Status

A small CSS component that turns browser-native <details> elements into dropdown menus.

View the demo on CodePen →

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 <details> element polyfill to add support to IE and Edge.

Direct Download

You can download the files directly from GitHub.

<link rel="stylesheet" type="text/css" href="path/to/drop.min.css">
<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.

<!-- Always get the latest version -->
<!-- Not recommended for production sites! -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/drop/dist/drop.min.css">

<!-- Get minor updates and patch fixes within a major version -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/drop@12/dist/drop.min.css">

<!-- Get patch fixes within a minor version -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/[email protected]/dist/drop.min.css">

<!-- Get a specific version -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/[email protected]/dist/drop.min.css">

And here's a CDN for the polyfill.

2. Add the markup to your HTML.

Create a standard <details> element, and add the .dropdown class. It can stand on its own, or be wrapped in a list item (<li>) as part of a bigger navigation menu.

The text inside the <summary> element is what toggles the dropdown. Add an unordered list (<ul>) with your dropdown items.

<details class="dropdown">
	<summary>This has dropdown items</summary>
	<ul>
		<li><a href="#hi">Hi</a></li>
		<li><a href="#universe">Universe</a></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.

<details class="dropdown dropdown-right">
	<summary>This has dropdown items, too</summary>
	<ul>
		<li><a href="#hermoine">Hermione</a></li>
		<li><a href="#harry">Harry Potter</a></li>
	</ul>
</details>

And that's it, you're done. Nice work!

Explore a demo on CodePen →

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.

<!-- Direct Download -->
<script src="path/to/drop.min.js"></script>

<!-- CDN -->
<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.

var dropdownGroup = new Drop('#my-nav');

// 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.

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 <details> element. You'll need to recreate your markup using the new pattern.

Browser Compatibility

Drop has the same support as the <details> 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 <details> element polyfill. Once Edge migrates to Blink, it will support the element natively.

License

The code is available under the MIT License.