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

Many folks use these, and their merits can be argued, but for practical purposes, the "Hamburger" icon has familiarity going for it, at the very least. These animations add a little more transparency to what it means from a UI perspective by transforming it into another recognizable icon - the closing "x". Full walkthrough here: http://designcouch.com/home/why/2014/06/23/playing-with-hamburger-icon-animations/


  1. nice, the second one is really slick

  2. Thanks, Hugo - I appreciate that!

  3. I agree with Hugo, the second one is pretty sweet. Wasn't expecting that. Well done.

  4. Thanks, Kyle.

  5. Nice bro, they all look good !

  6. This is awesome, but I noticed a bit of shifting after the animation is complete in Safari (Desktop and Mobile). I used translate() instead of absolute positioning on the spans and that seemed to work better. Here's my forked version: http://codepen.io/dalton/pen/YXZGry

  7. Nice touch - transforms are actually a better way to handle these than transitions.

  8. Hi, those are really nice. I love the last 2. Inspired by your work I tried to recreate the 3rd one. But, came out to be a little different than yours. Here it is-


  9. Awesome animations. Thanks alot!

  10. Love these. Nicely done.

  11. Thanks for these! I've used the third in a few projects now.

  12. Thanks a lot for this! I used it on a current project. Here's the codepen without the actual content: https://codepen.io/alFrame/pen/BQWGqp

    One thing I don't seem to be able to achieve is that the menu closes once a link is clicked. If you check my version, I added a "Back To Top" link. And when the page scrolls back up the menu is still unfolded.

    How can I add that the menu closes when the mouse leaves the area of the hamburger so that when the page scrolls back up the menu is "closed"?

    Any hints would be greatly appreciated!

  13. Just wanted to say thanks for these. I've use the third one a few times. Great!

  14. I saw this #1 on a site and just had to see how it worked. I like your code the best and have forked your pen. Whenever I use it, I'll put a comment in the code to credit you, with appreciation.

  15. GoodJob |

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

You must be logged in to comment.