Side menu animation

side menu animation
26.12.2017

In this tutorial you will learn how to create a side menu with animation and also hamburger button animation.

I used 2 elements on the page with class left_menu and page.
left_menu class consists of several elements:

  • menu_btn with 3 <span> elements used for creating hamburger menu icon
  • <ul> element that contains links of the menu

page class consists of two parts:

  • title class that containing the title of the page
  • text class that containing the text of the page with lorem ipsum text

<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>

<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>

For the font of the entire page I used the Ubuntu font with the initial body settings.

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body {
  font-family: 'Ubuntu', sans-serif;
  padding:0;
  maring:0;
}

On left_menu class element i set a fixed position with width od 300px and positioned it to go from top to the bottom of the page, and i put it out of screen on the left for 300px. I aloso set z-index of that element on 100 and ease-in-out transition of 0.3s. Menu links you can stylize as ever you want, or you can do it like i did in this tutorial.

.left_menu{
  position:fixed;
  left:-300px;
  top:0;
  bottom:0;
  width:300px;
  background-color:#0288D1;
  display:block;
  transition: all 0.3s ease-in-out;
    z-index: 100;
}

On page class element i set a fixed position and spread ti across the entire screen with z-index of 50 and ease-in-out transition of 0.3s. You can add and stylize any other element on page as you want.

.page{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #2F2933;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    padding: 20px;
      z-index: 50;
}

Special part is element with class menu_btn that contains three span elements. I set menu_btn height to be 50px and widht 60px. I set all <span> element to have 100% width and 10px height with absolute position, and put one on the top, one in the middle, and one on the bottom.

.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; 
}

I used jQuery to enable the click function on the menu_btn element. After you click menu_btn several clasess are added to elements:

  • on element menu_btn I added menu_on_btn class
    when it gets this class, it moves to the left, and the span elements are transformed into an "x" sign
  • on element page I added menu_on_page class
    when it gets the class page element moves to the right
  • on element left_menu I added menu_on class
    when it gets the class the menu moves to the right
.menu_on{
    left: 0px!Important;
}
.menu_on_page{
    left: 300px;
    right: -300px;
}
.menu_on_btn{
    left: 50%;
}

.menu_on_btn span:nth-child(1){
    position: absolute;
    display: block;
    width: 100%;
    height: 10px;
    background-color: #fff;
    box-sizing: border-box;
    transform: rotate(45deg);
    top: 20px;
}
.menu_on_btn span:nth-child(2){
    position: absolute;
    display: block;
    width: 100%;
    height: 10px;
    background-color: #fff;
    box-sizing: border-box;
    top: 20px;
    transform: rotate(-45deg);    
}

.menu_on_btn span:nth-child(3){
    position: absolute;
    display: block;
    width: 100%;
    height: 10px;
    background-color: #fff;
    box-sizing: border-box;
    top: 20px;
    left: -300px;
}

You can see the complete example below.