.
This commit is contained in:
15
README.md
15
README.md
@@ -8,7 +8,7 @@ A lightweight ES module for creating animated hamburger menu icons that can morp
|
||||
- **Configurable**: Customize size, foreground, background, and hover colors
|
||||
- **Lightweight**: Minimal dependencies (only SVG.js)
|
||||
- **ES Module**: Modern JavaScript module format
|
||||
- **Multiple Shapes**: Support for 8 different icon shapes
|
||||
- **Multiple Shapes**: Support for 25 different icon shapes
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -133,7 +133,7 @@ Returns the current SVG markup as a string.
|
||||
```javascript
|
||||
const svgCode = hamburger.getSvgCode();
|
||||
console.log(svgCode);
|
||||
// Output: <svg viewBox="0 0 120 120" width="100px" height="100px">...
|
||||
// Output: <svg viewBox="0 0 100 100" width="100px" height="100px">...
|
||||
```
|
||||
|
||||
#### `destroy()`
|
||||
@@ -201,7 +201,9 @@ hamburger.destroy();
|
||||
// Create hamburger with custom options
|
||||
const hamburger = new HamburgerMorphing('#menu-icon', {
|
||||
size: 100,
|
||||
color: '#007bff'
|
||||
foreground: '#007bff',
|
||||
background: '#ffffff',
|
||||
hover: '#ff0000'
|
||||
});
|
||||
|
||||
// Make it globally available for onclick handlers
|
||||
@@ -240,3 +242,10 @@ This project is open source and available under the [MIT License](LICENSE).
|
||||
## Demo
|
||||
|
||||
Open `hamburger.html` in your browser to see all available shapes and animations in action.
|
||||
|
||||
The demo includes:
|
||||
- **300x300px container** with a 1px border and red dot grid overlay
|
||||
- **25 interactive buttons** for all available shapes
|
||||
- **SVG code output** showing the current markup
|
||||
- **Hover effects** that change line colors on mouse interaction
|
||||
- **Smooth animations** between all shape transitions
|
||||
Reference in New Issue
Block a user