Make this project usable by other projects
This commit is contained in:
Your Name
219
README.md
Normal file
219
README.md
Normal file
@@ -0,0 +1,219 @@
|
||||
# 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 and color
|
||||
- **Lightweight**: Minimal dependencies (only SVG.js)
|
||||
- **ES Module**: Modern JavaScript module format
|
||||
- **Multiple Shapes**: Support for 8 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,
|
||||
color: '#ff6b6b'
|
||||
});
|
||||
|
||||
// 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
|
||||
- `color` (string, default: "#000"): Stroke color for the lines
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
const hamburger = new HamburgerMorphing('#menu', {
|
||||
size: 60,
|
||||
color: '#333'
|
||||
});
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
**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 120 120" 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>
|
||||
</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,
|
||||
color: '#007bff'
|
||||
});
|
||||
|
||||
// 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.
|
||||
Reference in New Issue
Block a user