rizal fauzan: Membuat Menu Atraktif dengan Thumbnail

Diposting oleh rizalfauzan's blog di 06.30

Selain dengan teks, menu bisa pula berupa gambar. Dalam tutorial ini kita akan membuat menu yang menampilkan thumbnail sebagai permalink. Dengan sedikit menggunakan javascript kita dapat membikin efek animasi ataktif yaitu ketika mouse dilewatkan diatas thumbnail secara otomatis thumbnail akan membesar.

Membuat HTML

Langkah pertama adalah membuat framework HTML untuk setiap item, dan berikut ini contohnya.

<div id="menuwrapper">
 <div id="menu">
  <a href="#" class="menuitem"><img src="image.jpg"></a><!--Template untuk setiap item-->
 </div>
</div>

CSS untuk Mengatur Tampilan

CSS disini untuk mengatur posisi dari thumbnail masing-masing item agar posisi bagian bawahnya tetap meski ukuran thumbnail membesar.

#menuwrapper {
     position : relative;
     height : 210px;
}

#menu {
     position : absolute;
     bottom : 0;
}

.menuitem {
     position : fixed relative;
     bottom : 0px;
     display : inline-block;
}

jQuery untuk Memberi Efek Animasi

Seperti berikut jQuery yang kita butuhkan.

$(document).ready(function(){
 $('.menuitem img').animate({width: 100}, 0); //membuat thumbnail menjadi lebih kecil

 $('.menuitem').mouseover(function(){

  gridimage = $(this).find('img');
  gridimage.stop().animate({width: 200}, 150); //gambar thumbnail mengembang menjadi sesuai sebenarnya

 }).mouseout(function(){

  gridimage.stop().animate({width: 100}, 150); //gambar thumbnail kembali mengecil

 });
});

jQuery pada contoh diatas mempunyai dua fungsi:

Membuat ukuran thumbnail menjadi lebih kecil dari ukuran aslinya ketika halaman pertama kali dimuat.
Memberi efek animasi dengan mengembalikan gambar kembali ke ukuran sebenarnya ketika mouse kita lewatkan diatasnya.

Mengatasi Masalah Skala Gambar di Internet Explorer

IE memang sering bermasalah dengan CSS,termasuk untuk skala gambar yang kita buat. Cara mengatasinya mudah, tinggal kopi kode css berikut dan paste pada style.

img { -ms-interpolation-mode: bicubic; }

Demo dari trik ini bisa kamu lihat dengan link dibawah.