Membuat Menu Atraktif dengan Thumbnail

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, begitu pula source codenya bisa kamu download juga. Selamat mencoba dan jangan lupa subscribe ke painthink RSS Feed.

Lihat Demo Download Source

8 Comments

  1. mantab neh sob, dicoba dulu..
    btw, link udah ane pasang, tengkyu! 😀

  2. anif hidayatullah

    tambah mantab bib, enek live demune barang…kerenn, makin pengen punya blog sendiri, tp diisi opo yo,,,?

    • ayooo Nif semangat bikin blog,sbg wahana belajar,sharing pengetahuan,hiburan ++ manfaat lain.
      isi apa aja yg penting bermanfaat

  3. wow, mantabs banget niy sob….
    salam hangat

  4. Nuhun pisan, wat pengetahuan.. maklum baru belajar…Do’a in saya bos biar bisa bikin blog kaya situ…. bagus tenan bro’

  5. Di tambah gambar koq malah jadi error ??

  6. attraktif banget mas, blognya juga ringan

Leave a Reply to khairuddin syach Cancel