Cara Membuat Hover Sidenav Dengan HTML Dan CSS

Selamat datang kembali di blog tips dan trik Source Code Aplikasi, halo teman – teman berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia blog. Di kesempatan kali ini saya akan memberikan tips mengenai bagaimana Cara Membuat Hover Sidenav Dengan HTML Dan CSS dimana kita akan membangun sebuah fitur vertical di posisi sidenav sebelah kiri. Selain itu pun di fitur hover kali ini akan kita gunakan pisis fixed, supaya ketika kita scroll ke bawah fitur hover sidenav tetap di posisi nya. Di bawah ini ialah demo gambar nya yang nanti kita akan bikin



Selamat



Ketika kita arahkan mouse di setiap fitur karenanya akan muncul hover nama fitur nya



Selamat



Bagus, seketika 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 Merancang Hoverable Sidenav Buttons</title>
</head>
<body>
<div id=fitur>
  <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 Merancang Hoverable Sidenav Buttons</h2>
</div>
</body>
</html>


Kemudian save dengan nama index.html, langkah berikutnya kita tambahkan css nya. Teman – teman dapat copy script css di bawah ini



#fitur 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;}
#fitur 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;}


Sekiranya telah save dan jalankan di browsernya, karenanya fitur hover sidenav berhasil kita bikin.



Selamat



Bagi mengetahui apakah fitur posisi fixed, coba teman – teman tambahkan tag <br> hingga browser menampilkan scroll. Kemudian teman – teman coba scroll keatas atau sebaliknya karenanya fitur akan berada di posisi tetap dengan kita berikan position:fixed;



Sekiranya teman – teman ingin berada di posisi kanan tinggal di rubah saja left menjadi right, bagaimana..?? Betul-betul gampang bukan, demikianlah Cara Membuat Hover Sidenav Dengan HTML Dan CSS teman – teman dapat kembangkan lagi supaya lebih menarik lagi hasilnya. Terimakasih dan hingga jumpa.



Semoga bermanfaat 🙂




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more