Hallo...
Semangat Pagi !
Senang sekali hari ini dapat memberikan postingan, yang semoga dapat berguna untuk teman-teman.
Baiklah, kali ini saya akan membahas tentang Hover Effect. Apa sih Hover Effect itu ?
Pengertian
Menurut google translate artinya adalah arahkan efek. Singkatnya begini, hover adalah aksi ketika kita mengarahkan pointer ke sebuah objek.
Dunia pemrograman, kalu harus menerangkan memang susah, langsung praktik aja biar faham. yuk simak !
Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.
Tahap Pelaksanaan
Hover effect yang akan kita pelajari di postingan ini adalah hover effect menu.
1. Langkah awah sudah pasti membuka text editornya, di sini saya memakai sublime text.
2. langkah selanjutnya, tulis kode berikut ini
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none; /*menghilangkan garis bawah dan titik*/
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block; /* membuat menu ke samping*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; /* menghilangkan dekorasi teks*/
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
3. Simpan dengan format "nama_file.html"
4. buka di browser, dan lihat hasilnya.
Referensi
http://www.w3schools.com/css/css_navbar.asp
Penutup
Trimakasih sudah menyimak postingan saya hari ini, jangan lupa share ya 😍😍
Selamat mencoba dan selamat belajar !
Join blog saya yah 😍😍
