Pure CSS Hamburger Menu Animation


In this article, we are creating Pure CSS Hamburger Menu Animation. We will show you the best way to create the Hamburger Menu animation with minimum code. There are thousands of tutorials and code are there to create this effect but this article is a little different. What is the little different mean here? Well, You can find plenty of hamburger menu code with the use of three <span> tag. In this article, we will show you the best way to create a toggle menu with only one <span> tag. The span tag is just representing each Hamburger menu bar nothing else.

We are not saying that these three span tags are not flexible. It is, but we will show you the best way to create a Pure CSS Hamburger menu animation.

Pure CSS Hamburger Menu Animation

In this tutorial, we will transform the hamburger menu into a plus sign. So when you click on the hamburger menu the this will transform to the plus sign. We use CSS to create a smooth transition and animation. We also JavaScript to create click event to the hamburger menu. Hover effect is also used here but it is not user-friendly. Now just look at the example.

Create Index.html file

When you get started you need to create two files. But first, we create the index.html file. Open Visual code editor or you can use any other editor also but we will recommend you to use the visual code editor. The visual code editor is free and user-friendly. Anyway, When you open it open an empty folder. This is your project folder. Now you need to create two files in this folder. Create two files Index.html and Style.css. Look at the index.html file.

In the above code, we create a division container class and put a span tag inside of this container. For the span, tag creates a toggle-con to access it in Style.css.

Style.css

As we said, This file is for Styling and animating the element. Now we are creating a code to create this amazing transformation. Now, what about the JavaScript? JavaScript is only for add event. Create code and generate three toggle bars. We are creating these three bars using after and before selector. Just look at the code you will understand better.

  • In the above code, we will remove padding and margin from body tag and add font family for the text.
  • we use container class to center the text and HTML element.
  • Create the toggle-icon class with after and before selector. This class will create three bars of the same color, height, and width.
  • After this, we will separate these three bars using margin and absolute positioning.
  • create after and before selector and specify position absolute and specify left 0 and margin-top. We specify the different margin for the after and before selector. You can see we specify negative and positive values.
  • You will see we created a .show class and change the toggle-icon properties. But why we need to create a new class and change the toggle-icon properties? Well if you change these properties directly then it will affect the toggle menu and inherit its own properties.
  • Another important use to create .show class is we are using toggle method in JavaScript. Now just look at the Javascript code.

Index.html

Update Index.html file with JavaScript code.

  • In this code, we add <script> Tag just before the closing body tag and add a function. Now, this function we create some code that adds and remove show class.
  • Name this function and pass the parameter event. Write e.classlist.toggle method. Toggle method is used to remove and add a CSS class.
  • The last thing is to add this function in the container. Now add a code to the container class and you are ready.  <div class="container" onclick="myFunction(this)">
  • Don’t forget to add this keyword it refers to the click event.

That’s it.

Now we are done with this Pure CSS Hamburger Menu animation. Experiment with it and create some more effects. If you have any question then comment us.

Follow us on Youtube for more information. Thank You.

Leave a Reply

Your email address will not be published. Required fields are marked *