Kali ini saya ingin berbagi info sedikit tentang membuat menu di css, biasa dalam pembuatan menu di css dominan pada menu dari text nahh kali ini saya akan berbagi gimana membuat menu rollover dengan gambar yang sudah kita desain di photoshop. Yukkk simak langkah-langkah nya.
Langkah 1
Kita siapkan terlebih dahulu menu gambar yang sudah kita buat di photoshop yang sudah di simpan dalam format PNG, kita siapkan dua buah, 1 untuk menu Link dan yang 1 lagi untuk mene rollover yang berubah saat di sentuh. Pastikan ukuran kedua gambar tersebut sama agar pada saat di sentuh tidak berubah.
Tombol aktif
Tombol Rollover
Langkah 2
Masukkan kode HTML di bawah ini, setiap List menu di buat dalam 1 id selector.
<div id=”menu”>
<ul>
<li id=”home”><a href=”home.html”>Home</a></li>
<li id=”gallery”><a href=”gallery.html”>Gallery</a></li>
<li id=”info”><a href=”info.html”>Info</a></li>
<li id=”comment”><a href=”comment.html”>Comment</a></li>
</ul>
</div>
hasil jadinya seperti ini :
Langkah 3
Selanjutnya jika sudah tersimpan maka selanjut nya masukkan kode CSS di bawah ini.
#menu {
position:absolute;
left:6px;
top:197px;
width:175px;
height:339px;
z-index:2;
}
#tombol ul{
list-style:none;
}
#tombol li{
text-indent:-9999em;
margin-bottom:12px;
}
#home a{
display:block;
background-image:url(gmbr/homelagi.png);
width:185px;
height:73px;
}
#home a:hover{
background-image:url(gmbr/homelagiover.png);
width:185px;
height:73px;
}
#gallery a{
display:block;
background-image: url(gmbr/galerylagi.png);
width:176px;
height:70px;
}
#gallery a:hover{
background-image: url(gmbr/gallerylagiover.png);
width:176px;
height:70px;
}
#info a{
display:block;
background-image: url(gmbr/infolagi.png);
width:173px;
height:69px;
}
#info a:hover{
background-image: url(gmbr/infolagiover.png);
width:173px;
height:69px;
}
#comment a{
display:block;
background-image: url(gmbr/comen.png);
width:174px;
height:70px;
}
#comment a:hover{
background-image: url(gmbr/comenover.png);
width:174px;
height:70px;
}
Catatan: untuk template dan isi bisa kalian modifikasi sendiri..
Selamat mencoba.. ^_^
Bagi-Bagi Ilmu 