css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

12 hamburger icon animations


  1. This is awesome!

  2. Nice animations! Just a little improvement, instead of including the whole jQuery library, you could use this oneliner to toggle the menus:

    Array.from(document.querySelectorAll('.hamburger')).forEach(menu => menu.classList.toggle('.is-active'));
  3. @marcobiedermann Thanks, that is really useful! :D

  4. I hope I'll reach your level someday:)

  5. I've been doing something similar changing hamburger into "X" check it out http://codepen.io/deseanwu/pen/ALzYjQ

  6. @deseanwu They are really good, I like the 3rd one!

  7. very nice!!! But it don't works for me in Firefox 52.0.2 and IE 11, is it only with me so or with you also?

  8. @WP-Nerd thank you and I've tested on both and they are working for me

  9. @lmenus thank you

  10. Hey Rosa. Do you have any explanation (mathematical) why you had to use exactly 13px to translate the lines? Was the number just working for you or is there some math behind it. Especially if you are using a different size for it

  11. @marcobiedermann Hello :) i think it worked for the size of the lines i used because the height of them is 5px and they have margin: 8px auto so added together it would be 13px. i added or take away 13px to bring the top and bottom line to where the 2nd line is

  12. Thank you very much for you quick reply. I will give it a try and let's see of it is working :)

  13. Beautiful tist and code! ; )

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.