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.
mantab neh sob, dicoba dulu..
btw, link udah ane pasang, tengkyu! 😀
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
wow, mantabs banget niy sob….
salam hangat
Nuhun pisan, wat pengetahuan.. maklum baru belajar…Do’a in saya bos biar bisa bikin blog kaya situ…. bagus tenan bro’
Di tambah gambar koq malah jadi error ??
errornya gmana?
attraktif banget mas, blognya juga ringan