https://github.com/chrisvdm/hamburger-icon-animate

Minimalist CSS3 hamburger animation
https://github.com/chrisvdm/hamburger-icon-animate

Last synced: 2 months ago
JSON representation

Minimalist CSS3 hamburger animation

• Host: GitHub
• URL: https://github.com/chrisvdm/hamburger-icon-animate
• Owner: chrisvdm
• License: mit
• Created: 2016-07-09T10:05:30.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-07-25T17:17:14.000Z (over 8 years ago)
• Last Synced: 2024-11-10T23:55:01.117Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 36.1 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hamburger-icon-animate

*Minimalist CSS3 hamburger animation*

![Example GIF](hamburger-icon-animate.gif)

This is a little bit of code to add an animation to the hamburger icon. The bulk of the animation is powered by CSS3 keyframes and raw JavaScript is used to control when each animation is run.

## Install

**bower**

```

$ bower install hamburger-icon-animate --save

```

**npm**

```

$ npm install hamburger-icon-animate --save

```

## Usage

Now that you've installed the plugin, load the script via whichever method you prefer. If you are using bower you might do something like this:

```html

```

Define the hamburger like this:

```html



  


  


  




```


Activate the hamburger like this:

```js

hamburgerIcon();

```

Take a look at the [example over here](example/index.html).

## API

### hamburgerIcon([options])

Binds event handlers for animating the hamburger icon to the first element in the document matching the selector `.hia-hamburger`.

An object of `options` may be given:

  - `showMenu`: A callback to be called each time the menu is shown (called at the *start* of the animation)

  - `hideMenu`: A callback to be called each time the menu is hidden (called at the *start* of the animation)

  ```js

  hamburgerIcon({

    showMenu: function() { console.log('showing menu'); },

    hideMenu: function() { console.log('hiding menu'); }

  });

  ```

*Let me know of any issues or simply say hi.*