https://github.com/zachleat/infinity-burger
A new kind of hamburger menu
https://github.com/zachleat/infinity-burger
web-components
Last synced: 12 months ago
JSON representation
A new kind of hamburger menu
- Host: GitHub
- URL: https://github.com/zachleat/infinity-burger
- Owner: zachleat
- License: mit
- Created: 2015-12-09T02:23:41.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2023-11-27T14:39:08.000Z (over 2 years ago)
- Last Synced: 2025-06-02T04:15:37.954Z (about 1 year ago)
- Topics: web-components
- Language: JavaScript
- Homepage: http://zachleat.github.io/infinity-burger/demo.html
- Size: 15.6 KB
- Stars: 32
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# infinity-burger
A new kind of hamburger menu.
No library dependencies. Cuts the mustard on [`CSSStyleSheet#replaceSync`](https://caniuse.com/mdn-api_cssstylesheet_replacesync). Demo on [zachleat.com](http://www.zachleat.com/web/) and [GitHub Pages](http://zachleat.github.io/infinity-burger/demo.html).
1. Click once to start the animation. Uses a meandering horizontal position.
1. Click again to reset to the initial state, a three layer hamburger menu.
## Markup:
```
```
## Release Notes
* `v1.0` and `v2.0`: Click states: (a) single vertical column (b) random position and rotation (c) resets back to vertical column (d) reset to three bars
* `v3.0`: Simplifies the thing to two states (on and off), the menu just meanders a bit on the horizontal axis.
* `v4.0`: Uses a custom element with Shadow DOM, simplifies markup and removes external stylesheet.