July 20, 2024

Membuat Menu Rollover Gambar Menggunakan CSS

2 min read

Halo sahabat PalComTech..

Kali ini saya ingin berbagi info sedikit tentang membuat menu di css, biasa dalam pembuatan menu di css dominan pada menu dibuat dari text. Nah, kali ini  saya akan berbagi bagaimana membuat menu rollover dengan gambar yang sudah kita desain di photoshop. Bagaimana? penasarankan? yuk simak dan ikuti  langkah-langkah nya dibawah ini!.

Langkah 1

Persiapkan terlebih dahulu  menu gambar yang sudah kita buat di photoshop, dan jangan lupa save 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. Untuk lebih jelas lihat gambar dibawah ini.

Langkah 2

Buka Dreamweaver di komputer kamu, buat file HTML yang baru. Kemduian masukkan kode HTML di bawah ini, setiap List menu di buat dalam 1 id selector.

[sourcecode languege=”php”]
<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>

[/sourcecode]

Hasil jadinya seperti ini :

Langkah 3

Selanjutnya jika sudah tersimpan maka selanjut nya masukkan kode CSS di bawah ini.

[sourcecode languege=”php”]
#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(<span style="color: #3366ff;">browse gambar/homelagiover.png yang sudah kamu buat</span>);
width:185px;
height:73px;
}
#gallery a{
display:block;
background-image: url(<span style="color: #3366ff;">browse gambar/homelagiover.png yang sudah kamu buat</span>);
width:176px;
height:70px;
}
#gallery a:hover{
background-image: url(<span style="color: #3366ff;">browse gambar/homelagiover.png yang sudah kamu buat</span>);
width:176px;
height:70px;
}
#info a{
display:block;
background-image: url(<span style="color: #3366ff;">browse gambar/homelagiover.png yang sudah kamu buat</span>);
width:173px;
height:69px;
}
#info a:hover{
background-image: url(<span style="color: #3366ff;">browse gambar/homelagiover.png yang sudah kamu buat</span>);
width:173px;
height:69px;
}

#comment a{
display:block;
background-image: url(<span style="color: #3366ff;">browse gambar/homelagiover.png yang sudah kamu buat</span>);
width:174px;
height:70px;
}
#comment a:hover{
background-image: url(<span style="color: #3366ff;">browse gambar/homelagiover.png yang sudah kamu buat</span>);
width:174px;
height:70px;
}
[/sourcecode]

Lihat contoh hasil akhirnya dibawah ini:

Catatan: untuk template dan isi bisa kalian modifikasi sendiri..

Bagaimana Silahkan mencoba, semoga bermanfaat! ^_^

0 thoughts on “Membuat Menu Rollover Gambar Menggunakan CSS

    1. :ngakak itu kareno hari belum belajar masih di TW2 kagek pas di TW4 baru belajar CSS, pasti di ajarin, oke,,, :2thumbup

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.