Create an Animated Hamburger using HTML5 and CSS3

Akash Gutha
InstructorAkash Gutha

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

We will create an interesting animated hamburger that can be used in websites. In this process, we will look at transitions and transformations in CSS3.

Further Links:

  1. https://codepen.io/tag/hamburger%20menu/
  2. https://codepen.io/designcouch/pen/Atyop

[00:01] Let's start with an empty HTML template. I'll name this animated hamburger. We'll make a base container, and give it an ID of ham. We'll add three divisions, and give them a class of line, which represents the three lines of our hamburger.

[00:19] Now, let's start styling our hamburger. Let's add a few styles to our page. We'll add a style for the container and for each line. You can see that we have our three lines displayed in the page. The CSS for the container is straightforward.

[00:38] For each line, we've added a width of 40 pixel and a height of 5 pixel, and gave it a background of black, and a border radius of 2 pixel to make it slightly rounded. We've also given it a margin of 6 pixel to get the gap between each line.

[00:52] We'll add some interactivity to the hamburger on hover. Now, we'll take the hover event on the container using the CSS solo class, hover, and change the CSS property of each eye line.

[01:07] We'll change the background color to be teal, and then we'll add a transition property so that the change isn't abrupt, and it will happen over a period of time. We are using 04 seconds for the time, and easing out for the smoothing function.

[01:22] Now, if we refresh our page and hover on the hamburger, you can see that the background color seamlessly transitions to teal.

[01:34] We'll add a script to animate the hamburger on click. First, we'll get the container by referencing the ID ham. Then we'll hook into the onClick function of the division. Now, we'll toggle a class called clicked on our hamburger for each click. Now, we can animate each line whenever the container has the class clicked attached to it.

[02:16] We'll change the width of each line to be 32 pixel. If we go ahead and refresh the browser and click on the hamburger, you can notice that that width has changed. Click on it again, the width will divert back.

[02:31] Let's make it a bit more interesting by animating each line separately. We've added three classes -- line one, line two, line three -- for each line. Let's make a copy of this CSS for each line. We have changed the class names and our widths to 18 pixel, 24 pixel.

[02:54] Now, if we refresh our browser and test this, you can see that the animation looks much more smoother and nice.

press0
press0
~ 4 years ago

very nice. which code editor and context sensitive plugins were used in the recording

Akash Gutha
Akash Guthainstructor
~ 4 years ago

very nice. which code editor and context sensitive plugins were used in the recording

I used Visual Studio Code as the eidotr. There were no plugins used. It just works out of the box. :)

Victor
Victor
~ 4 years ago

i wrote it up in angular 5

https://stackblitz.com/edit/hamburger-component?file=app/hamburger.component.ts

Akash Gutha
Akash Guthainstructor
~ 4 years ago

i wrote it up in angular 5

https://stackblitz.com/edit/hamburger-component?file=app/hamburger.component.ts

Great work Victor.

Stoyan Delev
Stoyan Delev
~ 4 years ago

Why are you using div#ham instead button, that is how people learn bad practices...

Akash Gutha
Akash Guthainstructor
~ 4 years ago

Why are you using div#ham instead button, that is how people learn bad practices...

Hi Stoyan, Generally Button comes with a lot of default styling. It's a good to use div in this case. Though we can restyle the button if you check major sites such as Google, you'll find that they use div for Hamburger menus.

Stoyan Delev
Stoyan Delev
~ 4 years ago

Why are you using div#ham instead button, that is how people learn bad practices...

Hi Stoyan, Generally Button comes with a lot of default styling. It's a good to use div in this case. Though we can restyle the button if you check major sites such as Google, you'll find that they use div for Hamburger menus.

I understand your point, but using DIV instead of BUTTON is totally wrong from an accessibility point of view. I see how people start copy/paste the code. When Google uses div for the hamburger they usually put ARIA attributes.

Akash Gutha
Akash Guthainstructor
~ 4 years ago

Why are you using div#ham instead button, that is how people learn bad practices...

Hi Stoyan, Generally Button comes with a lot of default styling. It's a good to use div in this case. Though we can restyle the button if you check major sites such as Google, you'll find that they use div for Hamburger menus.

I understand your point, but using DIV instead of BUTTON is totally wrong from an accessibility point of view. I see how people start copy/paste the code. When Google uses div for the hamburger they usually put ARIA attributes.

I understand your concerns, but the lesson was aimed at teaching the animation