This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create an Animated Hamburger using HTML5 and CSS3

    Akash GuthaAkash Gutha

    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
    scssSCSS
    cssCSS
    htmlHTML 5
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss