Selamat datang kembali di website tips dan trik Dumet School, halo teman – teman berjumpa kembali dengan saya dalam pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang bagaimana Cara Membuat Hover Sidenav Dengan HTML Dan CSS dimana kita akan membuat sebuah menu vertical pada posisi sidenav sebelah kiri. Selain itu juga pada menu hover kali ini akan kita gunakan pisis fixed, supaya ketika kita scroll ke bawah menu hover sidenav tetap pada posisi nya. Di bawah ini adalah demo gambar nya yang nanti kita akan buat
Ketika kita arahkan mouse pada setiap menu maka akan muncul hover nama menu nya
Baik, langsung saja kita implementasikan Cara Membuat Hover Sidenav Dengan HTML Dan CSS ini teman – teman siapkan text editornya. Kemudian ketikkan script html nya di bawah ini
<!DOCTYPE html> <html> <head> <title>Cara Membuat Hoverable Sidenav Buttons</title> </head> <body> <div id="menu"> <a href="#" id="home">Home</a> <a href="#" id="about">About Us</a> <a href="#" id="gallery">Gallery</a> <a href="#" id="contact">Contact</a> </div> <div style="margin-left:80px;"> <h2>Cara Membuat Hoverable Sidenav Buttons</h2> </div> </body> </html>
Kemudian save dengan nama index.html, langkah selanjutnya kita tambahkan css nya. Teman – teman bisa copy script css di bawah ini
#menu a {position: fixed;left: -100px;transition: 0.3s;padding: 15px;width: 100px;text-decoration: none;font-size: 20px;color: white;border-radius: 0 5px 5px 0;}
#menu a:hover {left: 0;}
#home {top: 20px;background-color: #274F8F;}
#about {top: 80px;background-color: orange;}
#gallery {top: 140px;background-color: gray;}
#contact {top: 200px;background-color: red;}
Jika sudah save dan jalankan pada browsernya, maka menu hover sidenav berhasil kita buat.
Untuk mengetahui apakah menu posisi fixed, coba teman – teman tambahkan tag <br> sampai browser menampilkan scroll. Kemudian teman – teman coba scroll keatas atau sebaliknya maka menu akan berada di posisi tetap dengan kita berikan position:fixed;
Jika teman – teman ingin berada di posisi kanan tinggal di rubah saja left menjadi right, bagaimana..?? Sangat mudah bukan, demikianlah Cara Membuat Hover Sidenav Dengan HTML Dan CSS teman – teman bisa kembangkan lagi supaya lebih menarik lagi hasilnya. Terimakasih dan sampai jumpa.
Semoga bermanfaat 🙂