Designers nowadays experiment a lot with animations to give their designs cool effect in Web design, animating things on certain events creates a much better user interaction if done correctly. But you should always avoid overuse of animations in your projects, as overuse of everything kills the UX.

After getting inspired by this fascinating dribble shot (it’s an animated hamburger menu icon), I decided to give it a go with CSS. Not purely this, but something close and similar. The general idea I’ll create the icon with the help of CSS and arrange it in such a way that its transforming elements look good and similar to our inspiration.

Let me remind you that the animation will play only when the icon has clicked. The dribble shot I showed you, in the beginning, features a slick animation in which the menu icon transforms into a cross icon. To do something similar to CSS, I chose to transition and transform properties.

the Hamburger Menu widget is on every other site nowadays. It has become synonymous with the web and, perhaps even more so, with web development. Have, for instance, a look at Dribbble or Codepen. There you’ll find a fair share of examples. They come in all shapes and sizes where one is more elaborative than the other. Developers and designers can’t seem to get enough of the widget.

The Hamburger Menu is not without controversy. Some hate it, and some love it. Numerous articles are debating it and its alternatives. Some argue that its proper place is in the history books. Regardless of its fate, it continues to have widespread use.

Over and over, it keeps showing up in new sites. It’s especially popular for mobile views where menus typically are hidden. There are quite a few variants out there exploring different kinds of animations. I’ve created a couple myself. Here is one of my creations:

In its most simple incarnation, the Hamburger Menu comes as straight, parallel lines. Usually, they’re three. These lines stay in some form of a clickable container. Shapes and sizes of menus may vary, but their use is the same. Clicking them toggles the hamburger’s state. This interaction makes the menu go back and forth between its opened and closed state.

The conventional way to portray the opened state is by showing an X. It signals to the user that tapping/clicking the button again closes the menu. Ever so often, there’s an animation going between these two states. Buttons like these are excellent opportunities for web developers to delight their users.

Generally speaking, it’s the perfect place to add an animation. Animating the button’s state transition is not just pleasing to the eye; it also serves a purpose. It’s a good UX to give users feedback on touch and click interactions.

The navigation stays neatly tucked away inside the hamburger symbol. When someone clicks on it, however, that standard navigation layout drops down into place, giving this site a cool little animation while sticking to more traditional styling.