Menu pop up pasti sudah kalian tahu bukan menu ini merupakan menu mouse over yang mana membuat tampilan gambar membesar ketika mouse berada diatasnya. Menu ini biasanya digunakan untuk membuat menu galeri pada website disamping sebagai penjelas gambar juga sebagai memperindah tampilan dengan halaman yang terbatas namun bisa menampilkan gambar yang lebih besar. Untuk membuatnya kita harus bermain pada CSS seperti biasa CSS berfungsi untuk pembuatan menu ini, pengen tahu kode-kodenya akan saya bagikan buat anda dengan contoh sample yang sudah saya buatkan untuk pembuatan menu ini. Menu ini hanya memerlukan gambar, gambar bisa anda persiapkan sendiri tapi ingat nama gambar harus sesuai dengan kode CSS maka belajarlah kreatif untuk membaca postingan ini karena
tidak terlalu mendetail, disamping membantu daya kreatifitas anda dan membuat postingan tidak terlalu cerewet begini cara pembuatannya:Buatlah gambar yang akan dipakai
Sekarang buat file CSSnya ingat simpan dengan style.css kodenya seperti ini:
------------------------------------------------------------------------------------------------------------
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*aturan css untuk gambar pop up*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
}
.thumbnail span img{ /*aturan css untuk gambar pop up*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*aturan css untuk gambar pop up pada saat hover*/
visibility: visible;
top: 0;
left: 60px; /*posisi dimana gambar pop up akan diletakkan secara horizontal */
}
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*aturan css untuk gambar pop up*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
}
.thumbnail span img{ /*aturan css untuk gambar pop up*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*aturan css untuk gambar pop up pada saat hover*/
visibility: visible;
top: 0;
left: 60px; /*posisi dimana gambar pop up akan diletakkan secara horizontal */
}
---------------------------------------------------------------------------------------------------------------
setelah pembuatan css sudah selesai maka sekarang kita buat file htmlnya kalau file ini boleh kok kalian simpan dengan nama sesuai keinginan anda:
---------------------------------------------------------------------------------------------------------------
<link href="style.css" rel="stylesheet" type="text/css">
<a class="thumbnail" href="http://wiswakarma.com"><img src="bali.jpg" width="100px" height="66px" border="0" /><span><img src="bali-big.jpg" /><br />Beautifulness of Bali, Indonesia</span></a>
<a class="thumbnail" href="http://wiswakarma.com"><img src="sunset.jpg" width="100px" height="66px" border="0"/><span><img src="sunset-big.jpg" /><br />Bali beautiful sunset</span></a>
<a class="thumbnail" href="http://wiswakarma.com"><img src="bali.jpg" width="100px" height="66px" border="0" /><span><img src="bali-big.jpg" /><br />Beautifulness of Bali, Indonesia</span></a>
<a class="thumbnail" href="http://wiswakarma.com"><img src="sunset.jpg" width="100px" height="66px" border="0"/><span><img src="sunset-big.jpg" /><br />Bali beautiful sunset</span></a>
---------------------------------------------------------------------------------------------------------------
nah mudah bukan pembuatannya itu hanyalah referensi langsung dengan kode yang bisa anda copy dan ingat pada posingan saya sebelumnya kalau belum mengerti lihat kembali posting tentang jenis penulisan css. Untuk contoh silahkan download disini
