6 CSS hamburger animations_html/css_WEB-ITnose

I used CSS and a little JavaScript to demonstrate how to generate a "hamburger" animation.

In a previous article, I posted my inspiration for the animation of the navigation bar menu (also known as the "hamburger icon"). As a result, I received many compliments from fans. I would like to thank you in advance.

I decided to work more on this, so I wrote a series of different animation implementations. In this article, you will see enhanced versions of 6 different "hamburger" animations.

I used a little JavaScript to trigger the animation. Before continuing to study, you can take a look at the Demo (Translator: If it cannot be opened, please click on the Demo at the bottom of the article)

Changes

The code I wrote before was not very neat. The main purpose of the changes is to make the code more tidy and orderly.

First, I replaced the meaningless div with a button element. This makes the code more readable.

Then I named the wrapper class name .hamburger. Inside .hamburger, I have another element (a span tag), and I positioned its class name as .icon

Essence

Our .icon element is wrapped to form a complete icon.

In order to make our animation smoother, the middle bar needs to be flexible enough, so the .icon element is used to act as the patty part of the hamburger.

As for the icon wrapping part, .hamburger not only acts as a wrapper, it also assists in completing the entire animation. Therefore, the upper and lower parts of the hamburger are filled by the .hamburger pseudo-class.

HTML

<button class="hamburger hamburger-cancel">  <span class="icon"></span></button>

As you can see, the button element plays the .hamburger role. Another class name (.hamburger-cancel) is used to distinguish what kind of burger it is (pan-fried chicken drumstick or Big Mac or something). We have 6 different flavors of burgers here.

JavaScript

As I said at the beginning, we use a small piece of JS code to switch, the following is my code snippet

var el = document.querySelectorAll('.hamburger');for(i=0; i<=el.length; i++) {  el[i].addEventListener('click', function() {    this.classList.toggle('active');  }, false);}

The above JavaScript is mainly By binding the click time, add the .active class to the corresponding element.

Code

The following CSS code sets the default state of our hamburger element. You can adjust the font-size appropriately. Of course, the maximum font-size cannot exceed our icon

In addition to structural specifications, we also use the CSS transition property to make the animation smoother.

.hamburger { font-size: 60px; display: inline-block; width: 1em; height: 1em; padding: 0; cursor: pointer; transition: transform .2s ease-in-out; vertical-align: middle; border: 0 none; background: transparent; }/** * Button height fix for Firefox */.hamburger::-moz-focus-inner { padding: 0; border: 0 none; }/** * Focus fix for Chrome */.hamburger:focus { outline: 0; }

Now, it’s time to draw our burger icon. The following definition can give us a clearer understanding of the entire process.

Obviously, all three of the icons The bars all have some common characteristics that we can extract.

.hamburger:before,.hamburger:after { content: ""; }.hamburger:before,.hamburger .icon,.hamburger:after { display: block; width: 100%; height: .2em; margin: 0 0 .2em; transition: transform .2s ease-in-out; border-radius: .05em; background: #596c7d; }/** * Styles for the active `.hamburger` icon */.hamburger.active:before,.hamburger.active .icon,.hamburger.active:after { background: #2c3e50; }

In the above code, we drew three bars in .hamburger. If we give it a little gap, we can clearly see the hamburger icon.

In order to look sleeker, we set the border-radius attribute. Since our elements have no text, we set a background color.

As expected, we have drawn a Shandong pancake. Let's move on to the next animation part.

Animation

6 different flavors of burgers, let’s analyze them one by one.

Vertical

In the simplest way, to rotate the burger, we only need to rotate it 90 degrees in the .active state, or 270 degrees, which will look cooler. a little.

/** * VERTICAL HAMBURGER */.hamburger.hamburger-vertical.active { transform: rotate(270deg); }

Rotate the bread and an 'X' shape will appear.

Of course, just spinning is not enough. While rotating, you also need to make changes on the Y axis, otherwise the distance will be a bit far.

/** * CLOSE/CANCEL/CROSS */.hamburger.hamburger-cancel.active .icon { transform: scale(0); }.hamburger.hamburger-cancel.active:before { transform: translateY(.4em) rotate(135deg); }.hamburger.hamburger-cancel.active:after { transform: translateY(-.4em) rotate(-135deg); }

This animation is like this:

- The upper bun moves and rotates to act as a vertical bar
- The bun at the bottom moves and rotates to act as a horizontal line

These 3 actions can complete the animation from hamburger to plus

/** * PLUS */.hamburger.hamburger-plus.active .icon { transform: scale(0); }.hamburger.hamburger-plus.active:before { transform: translateY(.4em) rotate(90deg); }.hamburger.hamburger-plus.active:after { transform: translateY(-.4em) rotate(180deg); }

Minus sign The change is like this, the middle layer still disappears, the other two pieces move up and down, and finally merge into one piece. Then let them rotate 180 degrees in the same way, which will be very cool~

/** * MINUS/DASH */.hamburger.hamburger-minus.active { transform: rotate(180deg); }.hamburger.hamburger-minus.active .icon { transform: scale(0); }.hamburger.hamburger-minus.active:before { transform: translateY(.4em); }.hamburger.hamburger-minus.active:after { transform: translateY(-.4em); }

This includes moving, rotating and adjusting the upper and lower pieces of bread. Finally, add a 180-degree rotation

/** * LEFT ARROW */.hamburger.hamburger-arrow-left.active { transform: rotate(180deg); }.hamburger.hamburger-arrow-left.active:before { width: .6em; transform: translateX(.4em) translateY(.2em) rotate(45deg); }.hamburger.hamburger-arrow-left.active .icon { border-radius: .1em .25em .25em .1em; }.hamburger.hamburger-arrow-left.active:after { width: .6em; transform: translateX(.4em) translateY(-.2em) rotate(-45deg); }

This is the mirror copy of the left arrow. You can copy the code of the left arrow and make appropriate changes.

/** * RIGHT ARROW */.hamburger.hamburger-arrow-right.active { transform: rotate(180deg); }.hamburger.hamburger-arrow-right.active:before { width: .6em; transform: translateX(0) translateY(.2em) rotate(-45deg); }.hamburger.hamburger-arrow-right.active .icon { border-radius: .25em .1em .1em .25em; }.hamburger.hamburger-arrow-right.active:after { width: .6em; transform: translateX(0) translateY(-.2em) rotate(45deg); }

I looked for similar implementations online and I found Sara’s Navicon transformicons to be cool, robust and more appealing.

I hope you enjoyed this article and feel free to share your thoughts and suggestions below. Thanks for reading.

http://helkyle.com/demos/hamburger-icons.html’ target=’__blank’>Click to view Demo

This article is based on the translation by @Rahul Arora. The entire translation contains my own understanding and meaning. If there is anything that is not translated well or is wrong, please give me some advice. If you want to reprint this translation, please indicate the English source: http://w3bits.com/animated-hamburger-icons/