Menambahkan Efek Hover Menu - Web Perpustakaan #Part 4

Menambahkan Efek Hover Menu - Web Perpustakaan #Part 4 | UKK RPL

 


Perubahan pada style.css untuk Hover Menu

<!-- Start Code Tambahan Efek Hover Menu -->
/* Gaya untuk menu di navigasi */
nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Efek hover untuk menu */
nav ul li a:hover {
background-color: #00bfff; /* Warna biru muda */
color: #fff;
border-radius: 5px; /* Tambahkan sedikit lengkungan pada kotak hover */
}

<!-- Finish Code Tambahan Efek Hover Menu -->

Penjelasan:

  • transition: background-color 0.3s ease, color 0.3s ease;: Menambahkan efek transisi halus selama 0,3 detik saat warna background dan teks berubah ketika mouse dihover.
  • background-color: #00bfff;: Menambahkan warna latar belakang biru muda saat hover.
  • border-radius: 5px;: Memberikan sedikit lengkungan pada sudut elemen agar terlihat lebih rapi.

Langkah 1: Simpan perubahan

Simpan perubahan ini di dalam file style.css.

Langkah 2: Refresh halaman

Setelah menyimpan, buka browser dan refresh halaman. Ketika Anda mengarahkan kursor ke menu navigasi, Anda akan melihat perubahan warna latar belakang dan transisi yang halus.

Jika Anda memerlukan bantuan lebih lanjut atau memiliki pertanyaan tentang membuat Web Perpustakaan Digital, jangan ragu untuk menghubungi ZE COME Training Center. Kami siap membantu Anda!

Lanjutkan ke Part berikutnya ya...

Post a Comment