wc-menu-button
A simple, animating menu web component
This small, simple web component has no dependencies and can be consumed by vanilla JS or any front-end framework. The animations are done via CSS with minimal Javascript.
- Lightweight (~1kb)
- No Dependencies
- CSS animated
- Portable
- Customizable via CSS
-
Semantic
button
internally
Example Usage
Listening to open/close events
<wc-menu-button id="myButton"></wc-menu-button> ... <script> const myMenuIcon = document.querySelector("#myButton"); if (!!myMenuIcon) { myMenuIcon.addEventListener("opened", ev => { console.log("menu was opened"); }); myMenuIcon.addEventListener("closed", ev => { console.log("menu was closed"); }); } </script>
Custom color
<style> :root { --wc-menu-button-color: orange; } </style> ... <wc-menu-button></wc-menu-button>
Custom size and hover opacity
<style> wc-menu-button { width: 67px; } wc-menu-button:hover { opacity: 1; } </style> ... <wc-menu-button></wc-menu-button>