Hamburger Menu Demo

# 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 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 ``` ## 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: Hamburger Menu Demo

``` ## 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