Side menu and hamburger button animation


Side menu and hamburger button animation Tutorial by Mirko Zovko | 27. Feb. 2020.

For menu button most of the developers using hamburger style button. You could use Font Awesome fa-bars or any other icon created as font, png or svg, but to have more style and animation on it you can create your own hamburger button with html and css only, and use css animation to make it look even better, so that visitors can really fell the click on that button.

In this tutorial I'm going to show you simple hamburger menu animation with simple side menu slide animation. To start with, I created two elements:

  • left_menu div with hamburger button and navigation
  • page that contain page title and page text as an example

As you can see in the html above, I used menu_btn paragraph tag with three span tags that I'm going to use for creating hamburger menu and <ul> tag I used for menu.

For page part I didn't use anything special. I add one title and one text, just for an example.

In this example of hamburger menu, I used position absolute on it, because I wanted that my button have option to move itself, left and right, depend on where left_menu is, but you can also use it in different way. CSS code you can see below. I used 0.5s transition animation with custom cubic-bazier function to make it look a bit nicer.

To make everything functional I also added one jQuery click fuction on it. With that function I'm toggling few clasess for .menu_btn, .page and for .left_menu.

To see how everything work and to test it yourself I made jsFiddle for you with functional code. In this tutorial I only made one type of hamburger menu button animation, but in some future tutorials I'll make few different button with css animatino also.