The purpose of this tool is to provide an easy-to-use interface and standardized-yet-flexible layout for navigation menus—the things where you click on them and they open up.
The core idea used in the custom element is that of two elements:
// Let's assume you have a Drawer with the ID `location-list`, // which is currently closed. document.getElementByID(`location-list`).toggleDrawer(); // The Drawer is now open. document.getElementByID(`location-list`).openDrawer(); // The state of the Drawer has not changed. document.getElementByID(`location-list`).closeDrawer(); // The Drawer is now closed.
The element itself applies almost no styling, aside from making sure that
[hidden] actually hides things. Beyond that it just changes the state via aria attributes and the presense or absence of the
hidden attribute on the drawer, allowing you to style and animate it however you like.
I’ve used this tool on several sites.