Biasanya Kalau kita mengunjungi web atau blog orang lain biasanya di bagian menunya sering terdapat animasi, salah satunya ketika cursor kita arahkan ke arah menu maka warna atau background gambarnya berubah.. na sesuai tutor saya kali ini saya share ilmu yang baru saya pelajari juga sekalian share buta nambah koleksi tman2 tentang css3. ok langsung aja.
Ada 2 versi yang akan kita buat yaitu hover dengan gambar dan hover dengan warna, yang pertama kita hover dengan gambar dulu.. biar teman2 gak susah mencarinya saya sertakan link gambar di bawah ini untuk jadi percobaan. Sebenarnya sich pakai gambar sendiri boleh juga tapi biar lebih gampang coba dlu d gambar di bawah ini biar gak repot nentuin gambarnya biar gak bingung nati waktu di kode cssnya..
link gambar 1 : https://lh6.googleusercontent.com/-GWpIz0R-yqY/UjMQpEtmRmI/AAAAAAAAAEc/SOfVgmtHUss/s145/bg_menu1.png
simpan dengan nama(bg_menu1.png)
link gambar 2 :https://lh3.googleusercontent.com/-5DzJdIYPATA/UjMQpG-nd4I/AAAAAAAAAEg/sVUHLZu_x6c/s145/bg_menu2.png
buka notepad teman2 lalu ketik atau copy pastekan kode CSS dibawah ini :
<style>
#menu {
position:absolute;
top:5px;
padding:0;
margin:0;
width:650px;
height:70px;
overflow:hidden;
}
#menu ul {
float:right;
height: 70px;
padding:0;
margin:0px;
}
#menu ul li {
display: inline;
font-size: 11px;
font-family:Verdana,Arial;
font-weight: bold;
height:70px;
margin:0px;
}
#menu ul li a { /*145x70*/
float: left;
display: block;
height:44px;
width:125px;
line-height: 14px;
color: #000000;
text-align:center;
padding: 26px 10px 0 10px;
margin:0 10px 0 0;
text-decoration:none;
background:url(bg_menu1.png) no-repeat top center;
}
#menu ul li a:hover, #header ul li.current_page_item a {
color:#ff0303;
background:url(bg_menu2.png);
}
</style>
Dibagian body ketik atau copy pastekan d syntak dibawah ini untuk memanggil menunya.
<body> <div class="img-1"></div> <div class="img-2"></div> <div class="img-3"></div> <div class="img-4"></div> <div class="img-5"></div> </body>
simpan dengan nama menu hover.html didalamm folder gambar menu tadi kemudian coba double klik file htmlnya
apa yang terjadi menunya berubah gak ketika kita arahkan kursornya kearah menu..
Coba d perhatikan kode d di bagian
pada tag background:url(bg_menu1.png) no-repeat top center;
bg_menu1 png itulah yang menjadi gambar awal menunya sebelum di hover,
lalu perhatikan pada tag
#menu ul li a:hover, #header ul li.current_page_item a {
color:#ff0303;
background:url(bg_menu2.png);
}
na disinilah letak pergantian gambar yang akan berubah ketika kursor kita arahkan kearah menu,
maka dalam sekejap background..
lanjut lagi untuk versi yang kedua kita pakai background warna, biar lebih cepat & gak perlu banyak utak atik kode css di bagian
tag background:url(bg_menu1.png) no-repeat top center; ganti menjadi background:red; lalu di bagian background:url(bg_menu2.png); ganti menjadi background:green;
}
pilih file trus save trus klik kanan reload page atau muat ulang hasil file html yang pertama tadi trus arahin lagi kursornya kearah menu, lihat warnanya berubah gak..???
hemm... saya jamin pasti berubah. Selamat d buat kamu yang berhasil, buat yang belum coba diperhatikan baik2 lagi d mungkin ada yang salah ketik di bagian css atau bodynya jadi hasilnya gak keluar..
sekian dulu d tutornya kali bila ada kekeliruan tolong dikomen y... kapan2 jumpa lagi dengan saya dengan tutor yang lebih menarik
wasalam sobat jaco..
