U ovom tutorialu naučit će te kako se kreira side menu sa animacijom, te animaciju hamburger menu tipke.

Koristio sam 2 glavna elementa na stranici sa class-om left_menu i page.
left_menu class se sastoji od nekoliko elemenata, a to su:

• menu_btn u kojem se nalaze 3 span elementa koja služe za hamburger menu ikonu
• <ul> element u kojem se nalaze linkovi menu-a

page class se sastoji od dva djela, a to su:

• title class koja sadrži naslov stranice
• text class u kojoj se nalazi text stranice sa lorem ipsum textom

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

Za font čitave stranice koristio sam Ubuntu font sa početnim body postavkama.

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

left_menu class element stavio sam fiksne pozicije sa širinom od 300px i pozicioniraio da ide od vrha do dna stranice te da je van ekrana za 300px, sa z-index-om od 100 i ease-in-out tranzicijom od 0.3s. Linkove možete stilizirati proizvoljno ili kao što sam i ja u ovom primjeru.

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

page class element stavio sam da je fiksne pozicije te da se nalazi raširen preko čitavog ekrana, sa z-index-om od 50 i ease-in-out tranzicijom od 0.3s. Ostale elemente unutar page-a možete također proizvoljno ubacivati i stilizirati.

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

Poseban dio je element sa class-om menu_btn u kojem se nalaze tri span elementa. Postavio sam menu_btn element visok 50px i širok 60px, a span elemente unutar njega sam postavio na display:block s absolutnom pozicijom, 100% širinom te visinom od 10px,  te sam jedan postavio na vrhu, drugi na sredini, a treći na dnu menu_btn elementa.

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

Koristio sam jQuery kako bi omogućio klik funkciju na menu_btn elementu. Nakon što se klikne menu_btn dodaje se nekoliko clasa:

• elementu menu_btn dodajem menu_on_btn class
  kad dobije ovu klasu pomjeri se ulijevo, te se span elementi transformiraju u "x" znak
• elementu page dodajem menu_on_page class
  kad dobije klasu page se pomjera udesno
• elementu left_menu dodajem menu_on class
  kad dobije klasu menu se pomjera udesno

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

Gotov primjer možete vidjeti ispod.