Buat icon menu berupa 3 bar dan animasi

pertama buat HTML dulu

<div class="container" onclick="change(this)">
   <div class="bar1"></div>
   <div class="bar2"></div>
   <div class="bar3"></div>
</div>

penjelasan HTML , div class="container" sebagai wadah dari ketiga bar (div class="bar1",dst.) onclick="change(this)" merupakan selector javascript berupa saat div class="container" di klik akan memanggil fungsi javascript change

lalu buat CSS nya

.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 20px;
    height: 3px;
    background-color: black;
    margin: 3px 0;
    transition: 0.4s;
}

/* putar bar ke 1 */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-4px, 4px);
    transform: rotate(-45deg) translate(-4px, 4px);
}

/* hilangkan bar ke 2 */
.change .bar2 {
    opacity: 0;
}

/* putar bar ke 3 */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, -4px);
    transform: rotate(45deg) translate(-4px, -4px);
}

lalu tambahkan javascript

function change(x) {
    x.classList.toggle("change");
}

penjelasan javascript , function change akan mengaktifkan dan menonaktifkan class change di div class="container"

sumber http://www.w3schools.com/howto/howto_css_menu_icon.asp dengan sedikit perubahan semoga bermanfaat dan mudah dipahami terima kasih