Dasar HTML, CSS dan Javascript : Membuat Push Menu -- Bag 3 : Javascript

Pada bagian 3 ini kita akan membuat daftar menu kelihatan dengan kita mengklik ikon menu dan daftar menu kembali menghilang dengan kita mengklik ikon close
Berikut kode javascript-nya.

var main = function(){
<!-- klik untuk ikon menu agar daftar menu kelihatan -->
    $('.icon-menu').click(function(){
        $('.menu').animate( {
            left: "0px"
        }, 200);
     
        $('body').animate({
            left: "285px"
        }, 200);
    });
<!-- klik untuk ikon close agar daftar menu kembali menghilang -->
    $('.icon-close').click(function(){
        $('.menu').animate( {
            left: "-285px"
        }, 200);
     
        $('body').animate({
            left: "0px"
        }, 200);
    });
};

$(document).ready(main);


Penjelasan :

• Ada 2 proses yang kita buat dengan script ini. Script yang mengubah kode css pada kelas menu dan kelas tombol-menu.
  Pertama :
  Pada saat yang kelihatan hanya ikon menu dan link menu. Ini merupakan keadaan awal.
  Saat ikon menu atau link menu kita klik, maka kelas menu akan kelihatan. Kelas menu           terdiri dari ikon close dan daftar menu.
  Kedua :
  Pada saat daftar menu dan ikon close kelihatan, link menu dan ikon menu bergeser kekanan.
  Pada saat ikon close kita klik maka ikon close dan daftar menu kembali menghilang, ikon menu dan link menu bergeser ke kiri kembali ke posisi awal.
• Kelas tombol-menu terdiri dari ikon menu dan link menu pada awalnya kelihatan pada posisi paling kiri. Perhatikan kode di atas pada bagian
  
   $('.icon-menu').click(function(){
          $('.menu').animate( {
              left: "0px"
          }, 200);
     
          $('body').animate({
              left: "285px"
          }, 200);
  
  Kode ini membuat perubahan kode CSS pada kelas menu dan body pada saat terjadi klik pada kelas icon-menu yang terdiri dari ikon menu dan link menu.
  Perubahannya pada kelas menu yaitu :
  left: -285px menjadi left: 0px
  Perubahannya pada body :
  left: 0px menjadi left : 285px
• Perubahan diatas terjadi dengan hasil kerja method animate. Angka 200 berarti perubahan ini terjadi selama 200 mili detik.
• Kode berikutnnya yaitu
  
   $('.icon-close').click(function(){
          $('.menu').animate( {
              left: "-285px"
          }, 200);
     
          $('body').animate({
              left: "0px"
          }, 200);
      });
  
  Kode ini bekerja seperti kode sebelumnya, tetapi perubahan pada atribut kelas menu dan body berbeda, yaitu:
  left: 0px menjadi left: -285px
  Perubahannya pada body :
  left: 285px menjadi left : 0px
• Method dari kode telah dibuat pada file kita yang tercantum pada file HTML yaitu jquery-1.11.1.min.js.

Hasilnya :

1. Keadaan awal
2. Setelah klik pada ikon menu atau link menu

Sekian postingan tutorial pembuatan Push Menu dari saya. Semoga bisa membantu :)
File lengkap yang sudah jadi: Push Menu
Bagian 1
Bagian 2