Skip to content
Fully animated CSS Hamburgers designed for websites with minimal Javascript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
hambjergers.css
hambjergers.js
hambjergers.min.css
hambjergers.min.js
hambjergers.scss
hambjergersjQuery.js
hambjergersjQuery.min.js

README.md

Hambjergers

These are simple, fully animated CSS hamburgers for use on websites. There is a minimal amount of Javascript used. All the javascript does, is add an event listener to any hamburgers and toggle the open class on the required child elements when the hamburger is clicked. Why open? Normally hamburgers are used to access a menu, and when clicked the menu opens / closes.

GIF Example

Example Website: http://aimes.eu/hambjergers/

Styles

  • Arrow - Left
  • Arrow - Right
  • Arrow - Up
  • Arrow - Down
  • Cross - Rotate
  • Cross - Spin
  • Cross - Circled
  • Cross - Circled Small
  • Cross - Fold

License / Usage

Free to use. Keeping the credits in the CSS/JS is very much appreciated, but not required. Do not, however, change the credits and claim it as your work.

Browser Compatibility

  • This project currently makes use of transform and transition.
    • For more info look at the respective Caniuse page.
  • Browser vendor prefixes are included where necessary, by default.

Notes / Additional Information

SASS file is also available, however this should be considered a WIP.

More styles will be coming soon. Also improvements, of course!

Current plans: (bold means important)

  • Fallback options for terribly old browsers
  • Improved settings and mathematics
  • Better support for multiple hamburgers
  • Suggestions welcome!

How to use

  1. Place the CSS and Javascript files provided in this repository on your webserver.
  2. Link the files in your HTML document(s). For example:
<link rel="stylesheet" href="hambjergers.css">
<script type="text/javascript" src="hambjergers.js"></script>
  1. Insert this code to your HTML document(s) this is a container holding 3 identical span elements.

    • Note: If using the hamburger-cross-fold animation, you will need to add a 4th identical span element.
    <div id="" class="hamburger-container">
        <span class="hamburger-piece"></span>
        <span class="hamburger-piece"></span>
        <span class="hamburger-piece"></span>
    </div>
  2. Change the value of the id tag to match the style you wish to use. These are the acceptable values.

    • hamburger-arrow-left
    • hamburger-arrow-right
    • hamburger-arrow-up
    • hamburger-arrow-down
    • hamburger-cross-rotate
    • hamburger-cross-spin
    • hamburger-circle-cross
    • hamburger-circle-cross-small
    • hamburger-cross-fold
  3. Now, just position it wherever you want it to be. That's all you need to get going. From here its down to you what you do with it. If you want to open a menu using these, then simply apply the same code in the .js file provided to toggle a class, but apply it to the elements you wish to change.

Framework / Create Your Own

You can easily create your own hamburger with a custom animation in 3 simple steps.

  1. Create an element with the class hamburger-container and give it an id, for example hamburger-custom-example

  2. Create 3 (or more) child elements with the class hamburger-piece on each.

  3. Add your own custom CSS animations using code similar to below, where # is the nth occurrence of hamburger-piece. (You can also use other methods such as @keyframes)

    #hamburger-custom-example .hamburger-piece:nth-of-type(#).open {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

Credits

You can’t perform that action at this time.