jQuery Menu Malu

Bismillah. Alhamdulillah. Sebelum menulis artikel ini, aku sudah "lemes" tertawa sendiri. Seperti tidak ada judul lain saja menggunakan nama "jQuery Menu Malu". Penamaan ini sebenarnya spontanitas ketika melihat hasil akhir dari efek menu tersebut. Kronologi kejadiannya itu tadi malam, karena tidur terlalu sore (sekitar jam 10) maka terbangun masih dini hari (sekitar jam 3), mata langsung segar dan bingung mau melakukan apa. Buka-buka buku menemukan naskah pidato Bacharudin Jusuf Habibie waktu di kampus UI sebanyak lima halaman. Begitu selesai otak justru menjadi "njlimet" antara mengerti dan tidak mengerti dengan isi pidato tersebut. Akhirnya buka laptop dan cari-cari inspirasi, mata tiba-tiba tertuju pada suatu gambar background berwarna gelap (yang nanti akan kita gunakan), maka lahirlah inspirasi untuk menulis kode jQuery. Menulis kode jQuery-nya juga cukup lama, hampir satu jam karena berganti-ganti ide dan efek yang digunakan. Dan akhirnya efek yang digunakan adalah on-hover, un-hover, slideUp dan slideDown seperti demo dibawah ini.

Demo jQuery Menu Malu

Deskripsi jQuery Menu Malu

jQuery Menu Malu pada mulanya disembunyikan, kemudian ditampilkan saat awal halaman di-load, beberapa saat kemudian menu kembali disembunyikan. Ketika mouse berada pada wilayah menu (on-hover) maka menu akan memanjang sendiri tanpa di klik dan menu pun akan ditampilkan. Ketika mouse meninggalkan area menu (un-hover) maka menu akan memendek sendiri tanpa di klik dan menu pun disembunyikan. Pada saat menu membuka efek slide dibuat lambat (slow) dan ketika menu menutup efek slide dibuat cepat jadi seakan-akan seperti malu-malu. Makanya kemudian di beri nama jQuery Menu Malu. Menu ini harus di sentuh baru membuka dan menutup jika di tinggalkan.

Skenario HTML jQuery Menu Malu

Dibawah ini adalah susunan kode HTML yang digunakan untuk membuat jQuery Menu Malu:

<div id="menumalu">
 <div id="topi"></div>
 <div id="isimenu">
  <ul>
   <li><a href="http://URL_1">Menu 1</a></li>
   <li><a href="http://URL_2">Menu 2</a></li>
   <li><a href="http://URL_3">Menu 3</a></li>
   <li><a href="http://URL_4">Menu 4</a></li>
   <li><a href="http://URL_5">Menu 5</a></li>
  </ul>
 </div>
 <div class="sepatu"><span class="panwah">&nbsp;</span></div>
</div>

Penjelasan:

• Jika diperhatikan maka menu ini terdiri dari satu wadah (container) utama yaitu <div id="menumalu">. Didalam container utama terdiri dari 3 bagian yaitu; <div id="topi"> (topi berarti bagian atas), <div id="isimenu"> (berisi menu-menu, sebenarnya bebas mau diisi apa saja), dan <div class="sepatu"> (sepatu berarti bagian bawah).
• Pada bagian '"sepatu" memiliki sebuah "span" yang nantinya akan digunakan untuk container anak panah. Jika menu terbuka maka anak panah menunjukan arah ke atas, jika menu tertutup maka anak panah menunjukan arah ke bawah. Inilah fungsi "span" pada bagian sepatu.
• Sedangkan untuk menu-menu yang ada didalamnya (didalam "isimenu") silahkan sesuaikan saja dengan kebutuhan.

Skenario CSS jQuery Menu Malu

Dibawah ini adalah susunan kode CSS yang akan digunakan untuk mempengaruhi tampilan HTML dan fungsi jQuery:

#menumalu{
 top: .4em;
 left:2em;
 width:230px;
 position: fixed;
 z-index: 200;
}
#topi {
 margin:0 ;
 padding:0;
 height:55px;
 background:url(malusprite.png) no-repeat 0 0;
 border-bottom:1px solid #000;
}
#isimenu{
 margin:0 ;
 padding:0;
 width:230px;
 background:url(malubg.png) repeat-y;
}
.sepatu{
 margin:0;
 padding:0;
 height:78px;
 background:url(malusprite.png) no-repeat 0 -80px;
 display:block;
 border-top:1px solid #302F2F;
}
span.panwah,span.pantas{
 width:27px;
 height:26px;
 display:block;
 margin-left:103px;
 margin-top:35px;
}
span.panwah{
 background:url(malusprite.png) no-repeat 0 -158px;
}
span.pantas{
 background:url(malusprite.png) no-repeat -27px -158px;
}

Penjelasan:

Kode CSS ini tidak akan di jelaskan satu persatu, jadi (ma'af) silahkan dipelajari sendiri. Hanya bagian pentingnya saja yang akan dijabarkan. Perhatikan kode CSS diatas sepeti ditulis ulang dibawah ini:

#menumalu{
 top: .4em;
 left:2em;
 width:230px;
 position: fixed;
 z-index: 200;
}

Kode ini digunakan untuk menempatkan posisi menu, seperti:

• top: .4em; digunakan untuk menentukan jarak dari bagian atas halaman ke menu. Ubah nilai .4em sesuai keinginan, jika tidak menemukan posisi tepat silahkan ganti satuannya. Gunakan satuan pixel agar lebih mudah dalam mengatur posisinya (misal; .4em diubah menjadi 4px).
• left:2em; digunakan untuk menentukan jarak dari sisi sebelah kiri halaman ke menu. Silahkan ubah nilainya atau ganti satuannya dengan pixel (misal; 2em diubah menjadi 20px). Jika anda ingin memposisikan menu pada sebelah kanan halaman, ubah "left" menjadi "right" maka menu akan berpindah pada sebelah kanan.
• width:230px; Nilai ini jangan diubah karena sudah disesuaikan dengan lebar gambar yang digunakan. Kecuali jika ingin mengganti gambarnya.
• position: fixed; Ini digunakan untuk menempatkan posisi menu dimana saja tanpa terpengaruh oleh elemen lain. Ini juga tidak perlu diubah.
• z-index: 200; Ini digunakan untuk menempatkan posisi menu terhadap elemen lain. Jika menu ini berada dibelakang menu lain, ubah nilai 200 menjadi lebih besar.

Skenario jQuery jQuery Menu Malu

(Nek urung kroso mumet, monggo di lajeng. Nanging ojo mekso... Ngunjuk tuyo kopi benter rumiyen sinambi ngeses...)
Di bawah ini adalah kode jQuery yang digunakan untuk memberikan efek pada menu:

$(document).ready(function () {

    jQuery('#isimenu').hide();
    jQuery(window).load(function () {
        jQuery('#isimenu').slideDown(1500, function () {
            jQuery('#isimenu').slideUp(200, function () {});
        });
    });
    jQuery('#menumalu').mouseenter(function () {
        jQuery('#isimenu').slideDown(1000, function () {
            jQuery('.sepatu span').removeClass('panwah').addClass('pantas');
        });
    });
    jQuery('#menumalu').mouseleave(function () {
        jQuery('#isimenu').slideUp(200, function () {
            jQuery('.sepatu span').removeClass('pantas').addClass('panwah');
        });
    });

});

Penjelasan:

$(document).ready(function () {

Kode di atas adalah kode wajib dalam menulis kode-kode jQuery

jQuery('#isimenu').hide();

Saat pertama kali halaman dipanggil #isimenu akan disembunyikan

jQuery(window).load(function () {

Pada saat halaman di load fungsi akan dimulai

jQuery('#isimenu').slideDown(1500, function () {

#isimenu akan ditampilkan dengan efek slide ke bawah pada kecepatan 1500 milidetik dan fungsi lain dimulai...

jQuery(this).slideUp(200);

#isimenu kemudian akan ditutup lagi dengan efek slide keatas pada kecepatan 200 milidetik

});

Efek slide ditutup

});

Fungsi load halaman di tutup

jQuery('#menumalu').mouseenter(function () {

Pada saat pointer mouse berada di area #menumalu maka fungsi dimulai...

jQuery('#isimenu').slideDown(1000, function () {

#isimenu akan ditampilkan dengan efek slide ke bawah pada kecepatan 1000 milidetik dan fungsi lain dimulai...

jQuery('.sepatu span').removeClass('panwah').addClass('pantas');

'class' dengan nama "panwah" pada span di bagian sepatu akan dibuang dan ditambahkan 'class' dengan nama "pantas"

});

Fungsi menampilkan #isimenu akan ditutup

});

Fungsi pointer mouse pada area menu akan ditutup

jQuery('#menumalu').mouseleave(function () {

Pada saat pointer mouse meninggalkan area #menumalu maka fungsi dimulai...

jQuery('#isimenu').slideUp(200, function () {

#isimenu akan ditutup dengan efek slide ke atas pada kecepatan 200 milidetik dan fungsi lain dimulai...

jQuery('.sepatu span').removeClass('pantas').addClass('panwah');

'class' dengan nama "pantas" pada span di bagian sepatu akan dibuang dan ditambahkan 'class' dengan nama "panwah"

});

Fungsi menutup #isimenu akan ditutup

});

Fungsi pointer mouse meninggalkan area menu akan ditutup

});

Fungsi jQuery ditutup

Unduh jQuery Menu Malu

Selamat mencoba dan semoga berhasil. Happy Blogging :)