Side menu and hamburger button animation

hamburgermenubuttonanimation

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

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
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="left_menu">
    <p class="menu_btn">
        <span></span>
        <span></span>
        <span></span>
    </p>
    <ul>
        <li><a>First</a></li>
        <li><a>Second</a></li>
        <li><a>Third</a></li>
        <li><a>Fourth</a></li>
    </ul>
</div>

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.

1
2
3
4
5
6
7
8
<div class="page">
    <h1 class="title">
        Side menu animation
    </h1>
    <p class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>

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. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.menu_btn{
    position: absolute;
    width: 60px;
    height: 50px;
    margin: 0;
    padding: 0;
    left: 350px;
    transform: translate(-50%,0);
    top: 20px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.menu_btn span{
    border-radius: 2px;
    transition: all 0.5s cubic-bezier(.75,-0.5,0,1.75);
}
.menu_btn span:nth-child(1){
    position: absolute;
    display: block;
    width: 100%;
    height: 10px;
    background-color: #fff;
    box-sizing: border-box;
    top: 0;
}
.menu_btn span:nth-child(2){
    position: absolute;
    display: block;
    width: 100%;
    height: 10px;
    background-color: #fff;
    box-sizing: border-box;
    top: 40px;
 
}
 
.menu_btn span:nth-child(3){
    position: absolute;
    display: block;
    width: 100%;
    height: 10px;
    background-color: #fff;
    box-sizing: border-box;
    top: 20px;
    left: 0;
}

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

1
2
3
4
5
6
7
$(".menu_btn").click(function(){
     
    $(".menu_btn").toggleClass("menu_on_btn");
    $(".page").toggleClass("menu_on_page");
    $(".left_menu").toggleClass("menu_on");
     
});

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.