251 lines
7.3 KiB
Markdown
251 lines
7.3 KiB
Markdown
# Hamburger Morphing
|
|
|
|
A lightweight ES module for creating animated hamburger menu icons that can morph into various shapes using SVG.js.
|
|
|
|
## Features
|
|
|
|
- **Smooth Animations**: 500ms morphing animations between shapes
|
|
- **Configurable**: Customize size, foreground, background, and hover colors
|
|
- **Lightweight**: Minimal dependencies (only SVG.js)
|
|
- **ES Module**: Modern JavaScript module format
|
|
- **Multiple Shapes**: Support for 25 different icon shapes
|
|
|
|
## Installation
|
|
|
|
### As a Git Submodule
|
|
|
|
Add this project as a submodule to your repository:
|
|
|
|
```bash
|
|
git submodule add <repository-url> lib/hamburger-morphing
|
|
```
|
|
|
|
### Manual Installation
|
|
|
|
1. Download `hamburger.mjs` from this repository
|
|
2. Include SVG.js in your project (CDN or npm)
|
|
3. Import the module in your JavaScript
|
|
|
|
## Quick Start
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="menu-icon"></div>
|
|
|
|
<script type="module">
|
|
import { HamburgerMorphing } from './lib/hamburger-morphing/hamburger.mjs';
|
|
|
|
// Create hamburger instance
|
|
const hamburger = new HamburgerMorphing('#menu-icon', {
|
|
size: 80,
|
|
foreground: '#ff6b6b',
|
|
background: '#ffffff',
|
|
hover: '#ff0000'
|
|
});
|
|
|
|
// Morph to different shapes
|
|
hamburger.animateTo('x'); // Close/X icon
|
|
hamburger.animateTo('burger'); // Back to hamburger
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Constructor
|
|
|
|
```javascript
|
|
new HamburgerMorphing(containerSelector, options)
|
|
```
|
|
|
|
**Parameters:**
|
|
- `containerSelector` (string): CSS selector for the container element
|
|
- `options` (object, optional): Configuration options
|
|
- `size` (number, default: 100): Size of the SVG in pixels
|
|
- `foreground` (string, default: "#000000"): Foreground/stroke color for the lines
|
|
- `background` (string, default: "#ffffff"): Background color for cutout effects
|
|
- `hover` (string, default: "#ff0000"): Hover color for interactive effects
|
|
|
|
**Example:**
|
|
```javascript
|
|
const hamburger = new HamburgerMorphing('#menu', {
|
|
size: 60,
|
|
foreground: '#333333',
|
|
background: '#ffffff'
|
|
});
|
|
```
|
|
|
|
### Methods
|
|
|
|
#### `animateTo(shape)`
|
|
|
|
Animates the hamburger icon to the specified shape.
|
|
|
|
**Parameters:**
|
|
- `shape` (string): Target shape name
|
|
|
|
**Available shapes:**
|
|
- `'burger'` - Three horizontal lines (default)
|
|
- `'x'` - Close/X icon
|
|
- `'plus'` - Plus/add icon
|
|
- `'minus'` - Minus/subtract icon
|
|
- `'arrow_left'` - Left arrow
|
|
- `'arrow_right'` - Right arrow
|
|
- `'arrow_up'` - Up arrow
|
|
- `'arrow_down'` - Down arrow
|
|
- `'triangle_up'` - Triangle pointing up
|
|
- `'triangle_down'` - Triangle pointing down
|
|
- `'triangle_left'` - Triangle pointing left
|
|
- `'triangle_right'` - Triangle pointing right
|
|
- `'carrot_right'` - Carrot/play shape pointing right
|
|
- `'carrot_left'` - Carrot/play shape pointing left
|
|
- `'carrot_up'` - Carrot/play shape pointing up
|
|
- `'carrot_down'` - Carrot/play shape pointing down
|
|
- `'circle'` - Perfect circle shape
|
|
- `'doughnut'` - Doughnut shape with center cutout
|
|
- `'moon'` - Crescent moon shape
|
|
- `'u'` - Inverted U shape (∩)
|
|
- `'u_up'` - Upright U shape (U)
|
|
- `'u_left'` - Left-facing U shape (⊂)
|
|
- `'u_right'` - Right-facing U shape (⊃)
|
|
- `'hamburger_vertical'` - Hamburger with middle line hidden (☰)
|
|
- `'hamburger_horizontal'` - Horizontal hamburger with middle line hidden (⫘)
|
|
|
|
**Example:**
|
|
```javascript
|
|
hamburger.animateTo('x');
|
|
hamburger.animateTo('arrow_right');
|
|
```
|
|
|
|
#### `getSvgCode()`
|
|
|
|
Returns the current SVG markup as a string.
|
|
|
|
**Returns:** (string) SVG markup
|
|
|
|
**Example:**
|
|
```javascript
|
|
const svgCode = hamburger.getSvgCode();
|
|
console.log(svgCode);
|
|
// Output: <svg viewBox="0 0 100 100" width="100px" height="100px">...
|
|
```
|
|
|
|
#### `destroy()`
|
|
|
|
Cleans up the hamburger instance and removes the SVG from the DOM.
|
|
|
|
**Example:**
|
|
```javascript
|
|
hamburger.destroy();
|
|
```
|
|
|
|
## Complete Example
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Hamburger Menu Demo</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
|
|
<style>
|
|
#menu-icon {
|
|
cursor: pointer;
|
|
margin: 20px;
|
|
}
|
|
button {
|
|
margin: 5px;
|
|
padding: 10px 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="menu-icon"></div>
|
|
|
|
<div>
|
|
<button onclick="changeShape('burger')">Hamburger</button>
|
|
<button onclick="changeShape('x')">X</button>
|
|
<button onclick="changeShape('plus')">Plus</button>
|
|
<button onclick="changeShape('minus')">Minus</button>
|
|
<button onclick="changeShape('arrow_left')">Arrow Left</button>
|
|
<button onclick="changeShape('arrow_right')">Arrow Right</button>
|
|
<button onclick="changeShape('arrow_up')">Arrow Up</button>
|
|
<button onclick="changeShape('arrow_down')">Arrow Down</button>
|
|
<button onclick="changeShape('triangle_up')">Triangle Up</button>
|
|
<button onclick="changeShape('triangle_down')">Triangle Down</button>
|
|
<button onclick="changeShape('triangle_left')">Triangle Left</button>
|
|
<button onclick="changeShape('triangle_right')">Triangle Right</button>
|
|
<button onclick="changeShape('carrot_right')">Carrot Right</button>
|
|
<button onclick="changeShape('carrot_left')">Carrot Left</button>
|
|
<button onclick="changeShape('carrot_up')">Carrot Up</button>
|
|
<button onclick="changeShape('carrot_down')">Carrot Down</button>
|
|
<button onclick="changeShape('circle')">Circle</button>
|
|
<button onclick="changeShape('doughnut')">Doughnut</button>
|
|
<button onclick="changeShape('moon')">Moon</button>
|
|
<button onclick="changeShape('u')">∩</button>
|
|
<button onclick="changeShape('u_up')">U</button>
|
|
<button onclick="changeShape('u_left')">⊂</button>
|
|
<button onclick="changeShape('u_right')">⊃</button>
|
|
<button onclick="changeShape('hamburger_vertical')">☰</button>
|
|
<button onclick="changeShape('hamburger_horizontal')">⫘</button>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { HamburgerMorphing } from './lib/hamburger-morphing/hamburger.mjs';
|
|
|
|
// Create hamburger with custom options
|
|
const hamburger = new HamburgerMorphing('#menu-icon', {
|
|
size: 100,
|
|
foreground: '#007bff',
|
|
background: '#ffffff',
|
|
hover: '#ff0000'
|
|
});
|
|
|
|
// Make it globally available for onclick handlers
|
|
window.changeShape = (shape) => {
|
|
hamburger.animateTo(shape);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Browser Support
|
|
|
|
- Modern browsers that support ES modules
|
|
- Chrome 61+
|
|
- Firefox 60+
|
|
- Safari 10.1+
|
|
- Edge 16+
|
|
|
|
## Dependencies
|
|
|
|
- **SVG.js** (3.0+): Required for SVG manipulation and animations
|
|
|
|
## License
|
|
|
|
This project is open source and available under the [MIT License](LICENSE).
|
|
|
|
## Contributing
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Make your changes
|
|
4. Test thoroughly
|
|
5. Submit a pull request
|
|
|
|
## 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 |